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元素绑定到插件上的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中。发生的事情是，任何以前绑定的处理程序或附加的事件/方法现在都将被销毁，因为术语已被覆盖。观察：

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

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

这与加载自定义库的原理相同。你已经覆盖了。

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

$('el').myNiftyFunction();

为什么AJAX打破了插件？

1 个答案: