在通过其他事件生成的元素上绑定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插入的最近父级.