响应页面加载后添加到文档的元素的点击事件答案

【问题标题】：Responding to click event of element added to document after page load响应页面加载后添加到文档的元素的点击事件
【发布时间】：2010-05-12 14:49:42
【问题描述】：

我正在编写一个使用 jQuery for AJAX 进行大量现场编辑和更新的页面。

我遇到了一个问题，可以用下面描述的工作流程来最好地总结：

单击页面上的“element1”会生成 jQuery AJAX POST
以json格式接收数据
接收到的数据为json格式
接收到的数据用于更新页面中的现有元素“结果”
接收到的数据实际上是一个 HTML 表单
我希望 jQuery 在单击表单按钮时负责发布表单

问题出现在上面的第 6 点。我的主页中有如下代码：

$(document).ready(function(){
  $('img#inserted_form_btn').click(function(){
   $.ajax({'type': 'POST', 'url': 'www.example.com', 'success': function($data){
      $(data.id).html($data.frm);
     }), 'dataType': 'json'}
  });
});

但是，事件并未被触发。我认为这是因为当第一次加载文档时，页面上不存在 img#inserted_form_btn 元素（由于在页面上单击了一个元素，它被插入到了 DOM 中（上面的代码中没有显示 - 到保持问题简短）

因此，我的问题是：如何让 jQuery 能够响应在页面加载后添加到 DOM 的元素中发生的事件？

【问题讨论】：

请注意这个问题，其中讨论了 .on、.live、.delegate 和 .click stackoverflow.com/questions/10983244/unsure-about-on-method/… - 添加此引用以保持此问题的站点/上下文是最新的

标签： jquery dom

【解决方案1】：

使用实时处理程序。 ^{一段时间以来已弃用，请查看我的答案的第二部分以获得更好的解决方案！}

$('img#inserted_form_btn').live('click', function() {
    // Your click() code
});

假设图像是绑定事件时已经存在的某个元素的子元素，您可以使用 delegate 代替：

$('#parent-element').on('click', '#inserted_form_btn', function() {
    // Your click() code
});

如果你没有 jQuery 1.7+：

$('#parent-element').delegate('#inserted_form_btn', 'click', function() {
    // Your click() code
});

无论如何，如果没有合适的父元素，您可以使用委托并使用$(document) 而不是$('#parent-element')。

【讨论】：

最好使用事件委托（.delegate()）。见官网解释api.jquery.com/live
我认为在我发布此答案时该方法不存在。
自 2010 年 2 月 1.4.2 起可用
啊，他没有提供足够的上下文来正确使用delegate。

【解决方案2】：

Live events 就是你要找的东西。

【讨论】：

【解决方案3】：

看1.4.2.delegate()

文档在这里：Delegate

【讨论】：

【解决方案4】：

您需要将点击分配为初始 AJAX 调用的后期处理事件，即

$.ajax({ url: "test.html", context: document.body, success: function(){
    $('img#inserted_form_btn').click(function(){
        $.ajax({'type: 'POST', 'url': 'www.example.com', function($data){
            $(data.id).html($data.frm);
        }), 'dataType': 'json'}
    });
}});

或使用 .live 方法确保在创建 dom 元素时重新分配事件。

【讨论】：

【解决方案5】：

您可以使用 live() 将函数绑定到与您的选择匹配的所有元素，甚至是将来创建的元素： http://api.jquery.com/live/

【讨论】：

【解决方案6】：

live 已被弃用，像这样使用 .on()：

$('#table tbody').on('click', 'tr', function(e){
    var row = $(this).find('td:first').text();
    alert('You clicked ' + row);
});

【讨论】：