我正在编写一个页面,它使用jQuery for AJAX进行大量的原位编辑和更新。
我遇到了一个问题,可以通过下面描述的工作流程进行总结:
问题出现在上面的第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中的元素中发生的事件?
答案 0 :(得分:10)
使用实时处理程序。 已经弃用了一段时间,请查看我的答案的第二部分以获得更好的解决方案!
$('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')
。
答案 1 :(得分:1)
Live events正是您要找的。 p>
答案 2 :(得分:1)
查看1.4.2 .delegate()
文档在这里:Delegate
答案 3 :(得分:0)
您需要在最初的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元素时重新分配事件。
答案 4 :(得分:0)
您可以使用live()将函数绑定到与您的选择匹配的所有元素,即使是将来创建的元素: http://api.jquery.com/live/
答案 5 :(得分:0)
live已弃用,请使用.on(),例如:
$('#table tbody').on('click', 'tr', function(e){
var row = $(this).find('td:first').text();
alert('You clicked ' + row);
});