jquery - 在通过其他事件生成的元素上绑定(bind) Jquery 事件

Question

我在通过另一个操作创建的项目上绑定(bind) 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 脚本来绑定(bind)鼠标进入和离开事件。

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

这将在元素 c_1、c_2 上成功应用事件，但是当加载更多链接调用时，它将生成更多元素。为此，我取消绑定(bind)悬停事件，并在单击加载更多链接时调用的函数下创建新元素后再次绑定(bind)它。

$(".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

在动态内容上你需要委托(delegate)，像这样:

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

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