javascript - 为什么 AJAX 会破坏插件？

Question

我有一个通过 AJAX 调用加载其内容的网页。

但是，当我通过 AJAX 异步加载某些插件时，它们会崩溃

我尝试使用 jQuery.getScript("/JS-directory-path/add-to-cart-variation.min.js", function(data, textStatus, jqxhr){ });

重新加载与通过 AJAX 调用的插件内容关联的 JavaScript 文件。这并不能缓解这个问题。

我的预感是该插件的内容正在被破坏，因为作者编写了 $(document).ready(function(){}); 并且这些函数没有在新版本上重新触发AJAX 内容。有没有办法将这些新的 DOM 元素绑定(bind)到插件上的 JS 文件？

执行所有异步加载的相关代码如下:

/* AJAX */


$(function(){

    //function for original content
    $('body').delegate('.barnav a, .userpro-awsm-link a, h4 a','click', function(){
        var href = $(this).attr("href");

            //add a history entry to the stack
            history.pushState(null, null, href);

            //AJAX call
            loadContainer(href);

            //break the anchor
            return false;
        });

//loadContent function
var $AJAX = $("#AJAX"),
    $pageWrap    = $("#under-the-table");

function loadContainer(href){
    $AJAX
            .find("#container")
            .fadeOut(250, function() {
                $AJAX.hide().load(href + " #container", function() {
                    $AJAX.fadeIn(250, function() { 
                    });

                            }); 
                });
            });
}


//AJAX for shop to keep category menu intact
$('html').delegate('#content a','click', function(){
        var href = $(this).attr("href");

            //add a history entry to the stack
            history.pushState(null, null, href);

            //AJAX call
            loadContent(href);


            //break the anchor
            return false;
        });

//loadContent function
function loadContent(href){
    $shopJAX = $("#container"),
    $shopWrap = $("#under-the-table"),

    $shopJAX
            .find("#content")
            .fadeOut(250, function() {
               $(this).hide().load(href + " #content", function() {
                    $(this).fadeIn(250, function() { 
                    });

                });

            });
}
if(loadContainer){
//simulates back button
$(window).on('popstate', function() {
   var lol = $(location).attr('href');
   loadContainer(lol);

});     
} else{
//simulates back button
$(window).on('popstate', function() {
   var lol = $(location).attr('href');
   loadContent(lol);

}); 
}
});

Answer 1

jQuery.getScript("/JS-directory-path/add-to-cart-variation.min.js", function(data, textStatus, jqxhr){ })

这会将脚本重新加载到 DOM 中。发生的情况是，由于命名法已被覆盖，任何先前绑定(bind)的处理程序或附加的事件/方法现在都将被销毁。观察:

var a = 1;
console.log(a); //1

var a = 2;
console.log(a); //2

这和加载自定义库的原理是一样的。您已覆盖 a。

您应该做的是重新调用该元素的处理程序。

$('el').myNiftyFunction();