我正在编写一个页面,它使用jQuery for AJAX进行大量的原位编辑和更新.
我遇到了一个问题,可以通过下面描述的工作流程进行总结：
>单击页面上的“element1”将导致jQuery AJAX POST
>以json格式接收数据
>以json格式接收的数据
>接收的数据用于更新页面中现有元素的“结果”
>收到的数据实际上是HTML表单
>我希望jQuery在单击表单按钮时负责POST表单
$(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中保持问题简短)
解决方法
使用实时处理程序.有一段时间以来已弃用,请查看我的答案的第二部分以获得更好的解决方案！
$('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’).
