調用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);
    });
}
...

其余部分相同。