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

前端之家收集整理的这篇文章主要介绍了在通过其他事件生成的元素上绑定Jquery事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我在通过另一个动作创建的项目上绑定jquery事件时遇到问题,例如当加载更多链接时点击

e.g there are list of elements

当点击加载更多链接时,它将生成更多元素,例如

页面加载时,我使用以下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事件或函数来帮助我在动态创建的元素上正确附加事件.

最佳答案
在动态内容上,您需要委托,如下所示:

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

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

原文链接:https://www.f2er.com/html/426390.html

猜你在找的HTML相关文章