通过其他事件生成的元素上绑定Jquery事件

Question

我遇到了一个问题，就是在通过另一个操作创建的项目上绑定jQuery事件时（例如单击“加载更多”链接），出现了问题。

e.g there are list of elements
<div class="itm" id="c_1"></div>
<div class="itm" id="c_2"></div>
....

点击“加载更多”链接时，会生成更多的元素，例如：

<div class="itm" id="c_11"></div>
<div class="itm" id="c_12"></div>
...

在页面加载时，我使用以下 jQuery 脚本绑定鼠标进入和离开事件。

$('.itm').on({
   mouseenter: function (e) {
      alert('mouse enter');
   },
   mouseleave: function (e) {
     alert('mouse leave');
   }          
});    

这将成功地在元素c_1、c_2上应用事件，但当加载更多链接调用时，它将生成更多的元素。为此，我解除了悬停事件的绑定，并在新元素在点击加载更多链接时创建的函数下重新绑定它。

$(".cmtldmore").on('click', function (e) {
     // Ajax process to load more elements in tray.
     // Unbind hover event
     $('.itm').off();
     // Bind it again
     $('.itm').on({
     mouseenter: function (e) {
           alert('mouse enter');
     },
     mouseleave: function (e) {
           alert('mouse leave');    
            }
        });
    });

页面上已经存在和通过“加载更多”功能创建的元素都能够正确显示，但是悬停事件只在已经创建的元素上起作用，而不是在通过“加载更多”创建的元素上。

有没有人能够帮助我在通过调用其他jQuery事件或函数动态创建的元素上正确附加事件。

- irfanmcsd

---

@Madbreaks - 如果目的是发现它实际上已经被弃用，那肯定是个好主意！ - adeneo

Answer 1

在动态内容上，您需要委托处理，就像这样：

在动态内容上，您需要使用委托来处理，如下所示：

$(document).on({
   mouseenter: function (e) {
      alert('mouse enter');
   },
   mouseleave: function (e) {
     alert('mouse leave');
   }          
}, '.itm'); 

您应该将document替换为最靠近的未通过Ajax插入的父元素。

- adeneo

---

如果你绑定到文档上，.live比.on看起来要漂亮得多。即使它已经被弃用了，也无所谓... - Kevin

Answer 2

请查看“on”文档中的“直接和委托事件”部分：http://api.jquery.com/on/。您可以使用事件委托来解决这个问题。

$('#itmWrapper').on({
   mouseenter: function (e) {
      alert('mouse enter');
   },
   mouseleave: function (e) {
     alert('mouse leave');
   }          
}, '.itm');  

这将把事件绑定到一个包装元素（由id itmWrapper组成，如果没有共同的父元素，则可以是body），并应用于该包装器内匹配选择器的所有元素，无论它们何时添加。

- James Montagne

---

谢谢您的建议，它完美地工作了，就像上面的答案所提到的那样。 - irfanmcsd