调用html内的javascript页面函数

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是未定义的

我猜想ajax的内容看不到父容器的功能

最简单的方法是加载包含共享功能的其他.js文件，我想知道是否可以从ajaxed内容访问updateBoxData

Answer 1

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

我猜想ajax的内容看不到父容器的功能

不，那不是原因。 您的updateBoxData变量的作用域范围是在（您ready ）回调中声明的函数。 如果要使其全局访问，则需要使其全局。

但是问题是，全局名称空间已经非常拥挤 。 因此，如果将所有有用的功能都放在全局变量中，那么迟早会遇到冲突。

因此，在浏览器支持ES2015模块之前（这将需要一段时间），我建议给自己一个全局符号（不太可能与其他符号冲突），并为它分配具有各种实用功能的属性的对象。 例如：

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

然后，通过MyNiftyUtils.updateBoxData调用。 如果冗长困扰您，不用担心，只需使用作用域确定功能并将其分配给本地：

(function() {
    var u = MyNiftyUtils;

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

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

Answer 2

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

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

这就是为什么您的代码不起作用的原因。 为了使它工作，只需将updateBoxData从.ready函数的回调中updateBoxData ：

$(document).ready(function() {
    $("#contents-box-in").load("new-01.php", function() {               
        $('#contents-box-in').fadeIn(120);              
    });
});
function updateBoxData(data) {
    $('#contents-box-in').fadeOut(100, function() {
        $('#contents-box-in').html(data).fadeIn(130);
    });
}
...

其余部分相同。