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

【问题标题】：Best way to load and unload JS file via JQuery通过 JQuery 加载和卸载 JS 文件的最佳方法
【发布时间】：2011-07-18 19:35:57
【问题描述】：

我一直在努力寻找通过 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> 元素，但我得到的只是相同的结果。

【问题讨论】：

标签： javascript jquery jquery-plugins programming-languages

【解决方案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');

【讨论】：

【解决方案2】：

您甚至可以有一个“占位符函数”并在再次加载脚本之前检查它的存在。但是，首先，我认为加载页面并且仅在加载外部脚本之后（并且仅在需要时）会更好

$("#button").live("click", function()
{
  var pl = $(this).attr('rel');
  //now we load the page, and then the "complete" callback function runs
  $('#container').load(""+ siteAddress +"load/"+ pl +"/", function() 
  {
    we check if the function is present into memory
    if (typeof window["page_" + pl + "_init"] == 'undefined')
    {
      //function not found, we have to load the script
      $.getScript('' + siteAddress + 'min/?js=fjs'+ pl +'');
    }
  });
});

进入外部脚本，您将需要该功能

function page_abcde_init()
{
  //this is just a place holder, or could be the function used
  //to initialize the loaded script (sort of a document.ready)
}

其中“page_abcde_init()”的“abcde”是被点击元素var pl = $(this).attr('rel');的值

【讨论】：