jquery给动态元素绑定事件无效

给动态元素绑定事件无效

图片描述

尝试给每个li元素绑定事件alert信息,无效

html:

图片描述

阅读 5.2k
9 个回答

解决方法:在ajax回调函数阶段给每个li加一个单独的class,然后$(class).click(),都没有使用到事件委托事件冒泡,具体为什么要这样我也不清楚

.es-carousel是什么时候加进来的

写个回调呗...代码可以归类放函数里咩,这样很乱

把事件绑定在ul 身上试试

使用 $(document).on("click",".es... ul li",function(){})

作者:白狼 出处:http://www.manks.top/javascri... 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
其所谓的动态添加事件实质就是指js中的事件委托。

我们知道在js中,事件处理只能绑定在当前被选中的元素上,换句话也就是说,事件处理只能绑定在当前文档已经存在的元素上!但是,往往小伙伴们都会遇到一个问题就是,我的元素是后来动态添加到页面的,而我又想给该元素绑定事件,怎么处理?

为了说明白这一问题,我们假设需要给后来添加到当前页面的元素添加click事件。

解决这一问题的核心就是利用js的委托事件。委派事件的优势就是可以给未存在的元素绑定事件,而且委派事件往往开销也会更小!

题外话:举一个最简单的例子:当页面上有1000个div的时候,如果直接给div绑定click事件,其会为1000个元素绑定事件。但是,如果用事件委托,只需要一个元素绑定事件即可。PS:希望啰里啰嗦能够让你明白事件委托的含义。

我们只是想知道动态创建的元素如何添加事件,你说这么多做什么,做什么...

好吧,言归正传,看具体实现:

// 模拟动态创建元素li
$.ajax({
    type: 'get',
    data: {},
    success: function () {                
        $('<li>').addClass('aaa').html('11111111').appendTo($('body'));
    },
});

// 给为我们刚刚动态创建的元素添加事件
$(document).on('click', 'li[class=aaa]', function(){
    console.log('ddd');
});

如果要删除.on绑定的事件,或者说要撤销已经委托的事件,直接使用.off()即可,类似的例子如下:

$(document).off('click', '.gridview');

吐槽下,贴的是截图而不是代码……既然是用ajax拉数据,生成的动态结构要写到回调里啊,要不不说你事件绑不绑的上了,可能连数据都是undefined的

应该是这段js代码在.es-carouse 元素生成之前执行,导致事件委托失效。楼上将事件委托在$(document)上的方法固然有效。个人觉得更好的做法是将js代码放在dom元素之后,或者使用jquery 的 ready函数

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题