javascript - 在ajaxed 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 is undefined

我猜ajaxed内容看不到父容器函数

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

Answer 1

...i would like to use a shared function contained in page that is loading the ajax content but i get updateBoxData is undefined

I guess that ajaxed content can't see parent container function

不，这不是原因。您的 updateBoxData 变量的范围仅限于它在(您的 ready)回调中声明的函数。如果您希望它可以在全局范围内访问，则需要将其设为全局范围。

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

出于这个原因，在浏览器支持 ES2015 模块之前(这需要一段时间)，我建议只给自己一个全局符号，不太可能与其他事物冲突的东西，并分配一个对象它具有各种实用功能的属性。例如:

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

然后您通过 MyNiftyUtils.updateBoxData 调用它。如果冗长困扰您，不用担心，只需使用作用域函数并将其分配给本地:

(function() {
    var u = MyNiftyUtils;

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

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