通过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>属性和创建dynamicaly <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');