問題描述

我一直在尋找通過 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加載一些頁面，同時它會為當(dāng)前加載的頁面包含適當(dāng)?shù)耐獠縅S文件，它第一次工作正常，但是當(dāng)我再次單擊按鈕時，最后一個JS仍然加載，所以它會在同一頁面觸發(fā)兩次JS文件中的函數(shù).

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> 屬性并動態(tài)創(chuàng)建 <script> 元素，但我得到的都是一樣的結(jié)果.

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');

但是，這可能會刪除更多的處理程序，而不僅僅是一個有問題的處理程序，因此您可以執(zhí)行以下兩種操作之一:1) 命名您的處理程序函數(shù)或 2) 創(chuàng)建一個命名空間.

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.

命名處理函數(shù)

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() 您必須將選擇器與調(diào)用 live() 時使用的選擇器完全匹配，否則結(jié)果可能無法預(yù)測:

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');

這篇關(guān)于通過 JQuery 加載和卸載 JS 文件的最佳方法的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！