在通过其他事件生成的元素上绑定 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 事件或函数动态创建的元素上。

Answer 1

在动态内容上，您需要委托，如下所示：

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

您应该将 document 替换为未使用 Ajax 插入的最接近的父级。

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 组成，如果没有公共父级，则可以是主体）并应用于该包装器中与选择器匹配的所有元素，无论何时添加。