我有这个简单的代码。 http://jsfiddle.net/borth/BmEZv/ 如果您单击链接一次,它可以正常工作。如果再次单击它,则不起作用。由于在加载DOM后html被加载到html中,我尝试过.on,.bind,.delegate和.live。除了被弃用的.live之外,它们都没有用(我使用的是jquery 1.7.2)。
有人可以解释为什么.live是唯一可行的功能,以及其他功能不起作用的原因(或者我是否对其他功能做错了。)
$(document).ready(function(){
$(".OpenPopup").bind('click', function(e){
alert('test .OpenPopup');
// do something
return false;
});
$(".EditIcon").bind('click', function(){
alert('test .EditIcon');
// do something
$("#ABC").html('<div class="EditIcon OpenPopup" pwidth="800" pheight="500" ptitle="EditText">click here again</div>');
});
});
<div id="ABC"><div class="EditIcon OpenPopup" pwidth="800" pheight="500" ptitle="EditText">click here</div></div>
答案 0 :(得分:17)
$(document).ready(function(){
$(document.body).on('click', ".OpenPopup", function(e){
alert('test .OpenPopup');
// do something
return false;
});
$(document.body).on('click', ".EditIcon", function(){
alert('test .EditIcon');
// do something
$("#ABC").html('<div class="EditIcon OpenPopup" pwidth="800" pheight="500" ptitle="Edit Text">click here again</div>');
});
});
答案 1 :(得分:2)
.on()
可以使用with or without delegation,下面是on()使用委托的示例。
$("#ABC").on('click', ".OpenPopup", function(e){
答案 2 :(得分:0)
关注@Dhofca这真的很有用。我只是展示了一个我尝试使用'this'关键字的示例。
$(document.body).on('click', ".query-result table tr", function () {
var el = $(this);
el.closest('table').find('tr').removeClass('dotted');
el.addClass('dotted');
});