Question

我有一个页面，我使用jQuery将一些内容加载到div元素

<div id="contents-box-in"></div>

页面中的jQuery代码

$(document).ready(function() {

        $("#contents-box-in").load("new-01.php", function() {               
            $('#contents-box-in').fadeIn(120);              
        });

        var updateBoxData = function(data) {

            $('#contents-box-in').fadeOut(100, function() {
                $('#contents-box-in').html(data).fadeIn(130);
            });

        }

    });

我加载的内容是需要加载从表单

发送收集数据的新页面的表单

            $('#form-buttons-next').click(function(e) {

                var formData = new FormData($(this)[0]);

                var formS = $.ajax({
                    url         : 'new-02.php',
                    type        : 'POST',                   
                    data        : formData,
                    async       : false,
                    cache       : false,
                    processData : false,
                    contentType : false
                });

                formS.done(function(data) {

                   if (data != null) {

                        updateBoxData(data);

                    }

                });

                formS.fail(function(jqXHR, textStatus) {

                    alert("error");

                });

            });

因为我在不同的步骤中执行此操作，我想使用加载ajax内容的页面中包含的共享函数，但我得到updateBoxData未定义

我猜ajaxed内容无法看到父容器功能

简单的方法是加载包含共享函数的不同.js文件，我想知道是否可以从ajaxed内容访问updateBoxData

Answer 1

...我想使用加载ajax内容的页面中包含的共享函数，但我得到updateBoxData未定义

我猜ajaxed内容无法看到父容器功能

不，那不是原因。您的updateBoxData变量的范围限定为它（ready）回调中声明的函数。如果您希望全局访问它，则需要将其设置为全局。

问题是，全局命名空间已经非常拥挤。因此，如果你将所有有用的函数作为全局变量放在那里，你迟早会遇到冲突。

出于这个原因，现在直到浏览器支持ES2015模块（这需要一段时间），我建议给自己一个一个全局符号，不太可能与其他东西发生冲突，并指定一个对象它具有各种实用功能的属性。 E.g：

var MyNiftyUtils = {
    updateBoxData: function() {
        // ...
    }
};

然后你通过MyNiftyUtils.updateBoxData致电。如果详细程度困扰您，不用担心，只需使用范围函数并将其分配给本地：

(function() {
    var u = MyNiftyUtils;

    // ....
    u.updateBoxData(/*...*/);
})();

（该主题有大约18种变体，这只是其中之一。）

Answer 2

函数updateBoxData在传递给.ready的回调函数中定义，因此其范围仅限于该函数。让我们称这个回调函数为Fx。

点击处理程序（在第二部分传递给.click的函数），我们称之为Fy，是在Fx之外定义的，因此无法访问Fx中定义的变量（记住{{ 1}}是Fx内的一个变量。

这就是您的代码不起作用的原因。要使其正常工作，只需将updateBoxData从updateBoxData函数中的回调中取出：

.ready

其余的都一样。

在ajaxed html中调用javascript页面函数

2 个答案: