替代jquery live的解决方案，可以正常工作。

Question

我有这段简单的代码。http://jsfiddle.net/borth/BmEZv/ 如果你点击链接一次，它可以正常工作。如果你第二次点击它，它就不能工作了。由于html是在DOM加载后加载的，我尝试了.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>

- Brandon Orth

---

".On" 是 ".Live" 的官方替代品。 - Robert Harvey

阅读 jQuery 文档 FAQ，获取答案为什么。 - charlietfl

我用.on()让它工作了。我之前的语法有误。 - Brandon Orth

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

- Dhofca

---

哇，从来没有想过这种方式。我还在寻找一些在最新的jQuery版本中替代.live方法的方法。有没有官方声明？谢谢你提供的代码片段，我会测试一下这个方法。 - Asif Ashraf

但是你如何定位被点击的.openpopup呢？ - Z2VvZ3Vp

在点击处理程序中的 e.target - jQuery event.target doc - Jake Berger

Answer 2

.on() 可以使用代理或非代理方式，以下是一个使用代理的 on() 示例。

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

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

- Musa

---

这个不起作用。它在第一次点击时按预期工作，但在第二次点击时，只使用.on()注册第一个警报。$(".EditIcon").bind('click', function(){没有被触发。我也尝试了使用.delegate()。 - Brandon Orth

@BrandonOrth 你要我重新为你重写整个代码吗？只需将第二个绑定更改为 on()。 - Musa

我修改了你的例子，在.EditIcon点击事件上添加了 .on()。可以工作了。谢谢。 - Brandon Orth

我现在已经把它弄好了。Dhofca做出了以下的更正。谢谢Musa。 - Brandon Orth

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

- Asif Ashraf