javascript - 在 $.load(content) 之后元素在 jQuery 中不可访问

Question

我使用带有$.load()功能的 jQuery 在我的主 html 文件中包含标记（来自单独的文件），index.html

例如，我加载contact.html：

<div id="bloc_load"></div> in 'index.html'

这工作正常。

问题是，在contact.html我有：

<input type="button" id="button_of_contact">

此元素已加载，index.html但我无法通过以下方式访问它：

$('#button_of_contact').click(function(){
    alert('Click');
});

index.html如果我在加载后查看源代码contact.html，我会看到：

<div id="bloc_load"></div>

是空的div，所以我认为 jQuery 无法访问。我该如何解决这个问题？

score 2 · Accepted Answer

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

选择.live()或.on()取决于您使用的 jQuery 版本。

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

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

查看我的示例和这个jsFiddle 演示

... 对于 jQuery.live()

$('#button_of_contact').live("click", function(e) {   
    e.preventDefault();  
    // do something;        
});

... 对于 jQuery.on()

$('#button_of_contact').on("click", function(e) {   
    e.preventDefault();  
    // do something;       
});

更新

jQuery Docs - 从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。然而，对于早期版本，它仍然是使用事件委托的最有效方法。有关事件绑定和委托的更多信息在 .on() 方法中。

$("#button_of_contact").delegate("input", "click", function() {
    e.preventDefault();  
    // do something; 
});

score 0 · Accepted Answer

假设内容已加载：

$("#bloc_load").on('click', '#button_of_contact', function() {
    console.log('click');
});

您必须检查控制台以查看已加载内容的更改代码，只需右键单击并查看源代码将不会显示添加的内容。