jquery - 可以工作的jquery live的替代品

Question

我有这个简单的代码。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>

Answer 1

$(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>');
        });
    });

Answer 2

.on()可以带或不带委托使用，下面是使用委托的 on() 示例。

$("#ABC").on('click', ".OpenPopup", function(e){

http://jsfiddle.net/BmEZv/1/

Answer 3

在@Dhofca 之后，这确实有效。我只是展示了一个我尝试使用“this”关键字的示例。

$(document.body).on('click', ".query-result table tr", function () {
    var el = $(this);
    el.closest('table').find('tr').removeClass('dotted');
    el.addClass('dotted');
});