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

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

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

>单击页面上的“element1”将导致jQuery AJAX POST
>以json格式接收数据
>以json格式接收的数据
>接收的数据用于更新页面中现有元素的“结果”
>收到的数据实际上是HTML表单
>我希望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中的元素中发生的事件？

解决方法

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

$('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’).