父页面上的jquery调用函数答案

【问题标题】：jquery calling function on parent page父页面上的jquery调用函数
【发布时间】：2015-06-12 11:55:11
【问题描述】：

我在 html 页面上使用 jQuery 将另一个页面加载到 div 中，使用 .ajax()。第二页有一个表格。当该表单提交时，我想调用一个函数（位于初始页面上）。目前我得到这个“ReferenceError: getHistory is not defined”（其中 'getHistory 是函数的名称）。

MAIN PAGE（减少空间）- 对象：单击按钮，出现表单，提交表单，从 ajax 调用更新历史记录。

<!DOCTYPE html>
<html lang="en" >
<head>...</head>
<body>

    <div id="msg"></div>

    <input type="button" id="AddEvent" value="add" />

    <div id="addForm"></div>

    <div id="history"></div>

    <!-- script references -->
    <script src="js/jquery.min.js" ></script>
    <script src="js/bootstrap.min.js" ></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>

    <script>
        $( document ).ready( function() {
            // Show form
            $( '#AddEvent' ).click( function() {
                $( '#addForm' ).hide();
                $( '#addForm' ).load( 'addform.html', function( response, status, xhr ) {
                    $( '#addForm' ).slideDown( 1000 ).fadeIn( 3000 );
                    if ( status == 'error' ) {
                        var msg = 'Sorry but there was an error loading the form: ';
                        $( '#msg' ).html( msg + xhr.status + ' ' + xhr.statusText );
                    } 
                });
            });

            // function to populate history
            function getHistory() {
                ...AJAX to populate history div...
            }

            // initial load on page load
            getHistory();
        }
    </script>
</body>

FORM PAGE：（减少空间）。

<form role="form" id="eventform" action="/eventHandeler" method="post" >
    ...
</form>
<script>
$( document ).ready( function() {

    $( '#eventform' ).ajaxForm( function() {

        alert("Thank you for add!");

        // ****** THIS IS WHERE I WANT TO RELOAD THE HISTORY...function on parent page
        getHistory();

    });

});

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

您已经在闭包范围内（在 dom 就绪处理程序内）创建了函数 getHistory，因此在该闭包范围之外无法访问它。如果你想让它在外部可以访问，你需要在两个调用方法共享的范围内声明它（在这种情况下是全局范围）

将方法移动到全局范围

$(document).ready(function () {
    // Show form
    $('#AddEvent').click(function () {
        $('#addForm').hide();
        $('#addForm').load('addform.html', function (response, status, xhr) {
            $('#addForm').slideDown(1000).fadeIn(3000);
            if (status == 'error') {
                var msg = 'Sorry but there was an error loading the form: ';
                $('#msg').html(msg + xhr.status + ' ' + xhr.statusText);
            }
        });
    });


    // initial load on page load
    getHistory();
})

//move it to global scope from the closure scope
// function to populate history
function getHistory() {
    //...AJAX to populate history div...
}

【讨论】：

【解决方案2】：

我们可以使用 parent 来引用父框架，然后像下面这样我们可以执行该函数。在这种情况下，它可以是：

parent.getHistory()

但是要使用上面的函数，我们需要把函数的定义从文档中准备好，给它更多的范围。然后通过上面的方式我们就可以访问了。

【讨论】：

通过将函数移动到全局范围 - “父级”。不需要。不过谢谢。