通过JQuery加载和卸载JS文件的最佳方法 [英] Best way to load and unload JS file via JQuery

问题描述

我一直试图找到通过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>属性并创建dynamicaly <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');

这篇关于通过JQuery加载和卸载JS文件的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！