在通过 jQuery 的 load() 函数加载的 HTML 上使用已经加载的 JS？答案

【问题标题】：Use JS that is already loaded, on HTML loaded via jQuery's load() function?在通过 jQuery 的 load() 函数加载的 HTML 上使用已经加载的 JS？
【发布时间】：2012-01-23 18:18:09
【问题描述】：

不确定这是否可行，但我正在尝试使用在通过 jQuery 的 load() 函数加载的动态 HTML 上最初请求页面时通过 script 标记加载的 JavaScript。

示例：http://jsfiddle.net/3MR43/

正如您在示例中看到的那样，单击弹出框中的链接后，链接就会消失。问题是该链接应该被停止，并且您应该看到一个警报。

但是，如果我粘贴通过 jQuery 加载的 HTML，它可以工作，所以代码没问题。

【问题讨论】：

标签： javascript jquery html load

【解决方案1】：

说明

您需要 jQuery .live() 或 .on() 方法将事件绑定到动态创建的 html。

根据您使用的 jQuery 版本选择.live() 或.on()。

.live() 从 jQuery 1.3 开始可用。为现在和将来匹配当前选择器的所有元素附加一个事件处理程序。

.on() 从 jQuery 1.7 开始可用。将一个或多个事件的事件处理函数附加到所选元素。

查看我的示例和这个jsFiddle Demonstration

样本

... 用于 jQuery.live()

$('.lang').live("click", function(e) {   
    e.preventDefault();  
    alert('Testing..');        
});

... 用于 jQuery.on()

$('.lang').on("click", function(e) {   
    e.preventDefault();  
    alert('Testing..');        
});

更多信息

【讨论】：

【解决方案2】：

问题是您的.click 只会对当时存在的元素执行此操作。如果您想为该选择器将匹配的所有潜在的未来元素执行此操作，您需要使用 on()（delgate() 或 live() 与旧版本的 jQuery）。

【讨论】：

【解决方案3】：

$('.lang').click()事件必须在元素创建后注册！

你需要一个回调函数来注册这个。

【讨论】：

【解决方案4】：

您需要使用 live 将处理程序附加到动态加载的元素。

试试这个，它会解决你的问题。

$('.lang').live('click',function(e) {

    e.preventDefault();

    alert('Testing..');

});

【讨论】：

【解决方案5】：

您必须使用on 函数来动态加载元素：

    $('.open_lang').click(function(e) {      
    e.preventDefault();    
    $('#popup').load('http://skins.thehabbos.org/pop_up/language.php').css('display', 'block');            
});

$('body').on('click', '.lang', function(e) {    
    e.preventDefault();  
    alert('Testing..');        
});

（live 和 delegate 在 JQuery 1.7+ 中已弃用，这是您的 JSFiddle 版本）

固定JSFiddle

【讨论】：