通过 JQuery 加载和卸载 JS 文件的最佳方法

2022-01-11 00:00:00 programming-languages jquery jquery-plugins javascript

我一直在寻找通过 jQuery 加载和卸载一些 JS 文件的最佳方法而感到沮丧，这是我能做的最后一件事:

I've been frustated trying to find the best way to load and unload some JS file via jQuery, this was last what I can do:

  $("#button").live("click", function(){
    var pl = $(this).attr('rel');
    $.getScript('' + siteAddress + 'min/?js=fjs'+ pl +'', function() {
       $('#container').load(""+ siteAddress +"load/"+ pl +"/");    
    });
  });

我想要做的是通过jQuery加载一些页面，同时它会为当前加载的页面包含适当的外部JS文件，它第一次工作正常，但是当我再次单击按钮时，最后一个JS仍然加载，所以它会在同一页面触发两次JS文件中的函数.

What I want to do is to load some page via jQuery, and at same time it will include appropriate external JS file for current page that been loaded, it work fine for the first time, but when I click the button again, the last JS still loaded, so it will trigger the function inside JS file twice time for same page.

我一直在尝试使用 .append，也可以通过更改 <script> 属性并动态创建 <script> 元素，但我得到的都是一样的结果.

I've been try use .append, also by change <script> attribute and create dynamicaly <script> element but still, all i got is same result.

推荐答案

你不能卸载"JavaScript.一旦它被加载，它就被加载了.无法撤消.

You can't "unload" JavaScript. Once it's loaded, it's loaded. There's no undo.

但是，您可以分离事件处理程序.请参阅:http://api.jquery.com/unbind/

However, you can detach event handlers. See: http://api.jquery.com/unbind/

live() 是 unbind() 的一个特例.实时事件处理程序附加到 document 而不是元素，因此您必须像这样删除处理程序:

live() is a special case for unbind(), though. Live event handlers are attached to document rather than the element, so you have to remove the handler like so:

$(document).unbind('click');

但是，这可能会删除更多的处理程序，而不仅仅是一个有问题的处理程序，因此您可以执行以下两种操作之一:1) 命名您的处理程序函数或 2) 创建一个命名空间.

However, that would probably remove more handlers than just the one in question, so you can do one of two things: 1) name your handler function or 2) create a namespace.

命名处理函数

function myClickHandler(){
    var pl = $(this).attr('rel');
    $.getScript('' + siteAddress + 'min/?js=fjs'+ pl +'', function() {
       $('#container').load(""+ siteAddress +"load/"+ pl +"/");    
    });
}

$("#button").live("click", myClickHandler);

// And later ...

$(document).unbind('click', myClickHandler);

命名空间

$("#button").live("click.myNamespace", function(){
    var pl = $(this).attr('rel');
    $.getScript('' + siteAddress + 'min/?js=fjs'+ pl +'', function() {
       $('#container').load(""+ siteAddress +"load/"+ pl +"/");    
    });
});

// And later...

$(document).unbind('click.myNamespace');

更新:

正如@RTPMatt 下面提到的，die() 实际上更合适.上面描述的方法会起作用，但是 die() 更容易使用.但是，使用 die() 您必须将选择器与调用 live() 时使用的选择器完全匹配，否则结果可能无法预测:

As @RTPMatt mentions below, die() is actually more appropriate. The method described above will work, but die() is easier to use. However, with die() you must match the selector exactly to the one used when you called live() or the results may be unpredictable:

$("#button").live("click", function(){
    var pl = $(this).attr('rel');
    $.getScript('' + siteAddress + 'min/?js=fjs'+ pl +'', function() {
       $('#container').load(""+ siteAddress +"load/"+ pl +"/");    
    });
});

// And later ...

$('#button').die('click');

相关文章