javascript - 通过 JQuery 加载和卸载 JS 文件的最佳方式

Question

我一直在尝试找到通过 jQuery 加载和卸载一些 JS 文件的最佳方式，这让我很沮丧，这是我最后能做的了:

  $("#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 文件中的函数两次。

我一直在尝试使用 .append，也通过更改 <script>动态属性和创建 <script>元素，但我仍然得到相同的结果。

Answer 1

您不能“卸载”JavaScript。一旦加载，它就会加载。无法撤消。

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

不过，

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

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

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

命名处理函数

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() 时使用的选择器完全匹配，否则结果可能无法预测:

$("#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');