$ .load（内容）后jQuery中无法访问元素

Question

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

例如，我在{/ p>中加载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无法访问。我该如何解决这个问题？

Answer 1

描述

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

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

  

.live（）自jQuery 1.3起可用。为现在和将来与当前选择器匹配的所有元素附加事件处理程序。

     

.on（）自jQuery 1.7起可用。将一个或多个事件的事件处理函数附加到所选元素。

查看我的示例和此jsFiddle Demonstration

示例

...适用于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;       
});

更多信息

• jsFiddle Demonstration
• jQuery.live()
• jQuery.on()

更新

  

jQuery Docs - 从jQuery 1.7开始，.delegate（）已被.on（）方法取代。但是，对于早期版本，它仍然是使用事件委派的最有效方法。有关事件绑定和委派的更多信息，请参见.on（）方法。

示例

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

Answer 2

假设已加载内容：

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

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