分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

jQuery绑定动态元素的点击事件无效

发布时间:2023-09-06 02:17责任编辑:白小东关键词:jQuery点击事件

示例如下:

<div> ?<ul id="demo"> ???<li>Kubernetes:下一代分布式系统的护戒使者</li> ???<li>机器学习工具--Pandas cheat sheet</li> ???<li>Android 8.0 正式版即将发布 谷歌还要建超人模型</li> ???... ???//li是动态生成 ?</ul></div><script type="text/javascript"> ???//动态像ul的末尾追加一个新元素 ???$("#demo").append(‘<li>Kubernetes:下一代分布式系统的护戒使者</li>‘); ????$("#demo").append(‘机器学习工具--Pandas cheat sheet‘); ????$("#demo").append(‘Android 8.0 正式版即将发布 谷歌还要建超人模型‘); ????...</script>

错误示范:

// 示范一$("#demo li").click(function(){ ???alert($(this).html());});// 示范二$("#demo li").on(‘click‘,function(){ ???alert($(this).html());});

通过运行以上代码,就会发现动态生成的标签事先绑定的点击事件点击了没反应。总结一下,推测上面这个监听函数,是在网页加载的时候就指定了对象,而通过代码追加,如通过js追加的元素,是不能匹配这个事件的。那么,我们应该使用什么来绑定动态元素呢,支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on,使用on的时候也要注意,on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等,可以放在on的第二个参数里面。

正确示范:

$("#demo").on(‘click‘, ‘li‘,function(){ ???alert($(this).html());});

jQuery绑定动态元素的点击事件无效

原文地址:https://www.cnblogs.com/perfect-li/p/9744903.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved