为什么AJAX会破坏插件？

Question

I have a webpage that loads its content through AJAX calls.

However some plugins will break when I asynchronously load them through AJAX

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

to reload the JavaScript files associated with the plugin content that was called through AJAX. This does not do anything to alleviate the issue.

My hunch was that the plugin's content is breaking because the author wrote $(document).ready(function(){});'s and these functions were not being re fired on the new AJAX content. Is there a way to bind these new DOM elements to the JS files on the plugin?

The code that is in question that is doing all the Asynchronous loading is as follows:

/* 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){ })

This is reloading the script into the DOM. What's happening is that any previously bound handlers or attached events/methods will now be destroyed as the nomenclature has been overwritten. Observe:

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

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

This is the same principle with loading custom libraries. You've overwritten a.

What you should be doing is re-invoking the handler for the element instead.

$('el').myNiftyFunction();