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

Question

我正在编写一个页面,它使用jQuery for AJAX进行大量的原位编辑和更新.

我遇到了一个问题,可以通过下面描述的工作流程进行总结:

1. 单击页面上的"element1"会导致jQuery AJAX POST
2. 数据以json格式接收
3. 以json格式接收的数据
4. 接收的数据用于更新页面中现有元素的"结果"
5. 收到的数据实际上是HTML表单
6. 我希望jQuery在单击表单按钮时负责POST表单

问题出现在上面的第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中的元素中发生的事件？

Answer 1

使用实时处理程序.^{从一段时间后不推荐使用,请查看我的答案的第二部分以获得更好的解决方案}

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

假设图像是绑定事件时已存在的某个元素的子元素,则可以使用委托:

$('#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')没有合适的父元素的情况下使用委托.