解决jQuery ajax动态新增节点无法触发点击事件的问题
2023-09-11 14:19:35 时间
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件。为什么点击事件失效,我们该怎么去解决呢?
其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件。
解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法,为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码:
1 <ul id="demo"> 2 <li class="demo1">a1</li> 3 <li class="demo1">a2</li> 4 <li class="demo1">a3</li> 5 </ul> 6 7 <script type="text/javascript"> 8 $("#demo").click(function(){ 9 $("#demo").append('<li class="demo1">aaa4</li>'); //动态像ul的末尾追加一个新元素 10 }); 11 </script>
方法一:使用live:
live()
函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数。通过live()
函数适用于匹配选择器的当前及未来的元素。比如,通过脚本动态创建的元素。
实现如下:
$('.demo1').live('click', function(){
alert('OK');
});
方法二:使用on:
可以通过on
方法绑定事件,可以绑定到它的父级或者body中,实现如下:
$("#demo").on('click','.demol',function(){
alert('OK')
});
通过上面的两种方法,都可以解决jQuery ajax动态新增节点无法触发点击事件的问题。知道方法了,赶紧的试试吧。
来源:http://www.shuchengxian.com/Article/info/id/228.html
相关文章
- jQuery实时显示鼠标指针位置和键盘ASCII码
- 推荐jQuery插件系列——表单验证formValidator
- 解密jQuery事件核心 - 模拟事件(四)
- jQuery插件 -- Form表单插件jquery.form.js
- jquery移动端一个按钮两个事件
- 第二百一十四节,jQuery EasyUI,Calendar(日历)组件
- 2013年度最佳 jQuery 插件集合(1) - 前端编程 - IT工作生活这点事。Just Su
- 10个简单实用的 jQuery 代码片段
- jquery 事件委托绑定click的使用方法
- 前端动态效果小结(jQuery)
- 使用jquery的方法和技巧
- jquery事件重复绑定解决办法
- jQuery.sap.newObject
- jQuery 事件方法大全-超全的总结
- python web py入门(43)- jQuery 事件 - ready() 方法
- python web py入门(46)- jQuery 事件 - $( document ).ready与$( window ).on( "load"的区别
- python web py入门(44)- jQuery 事件 - 函数表达式
- jquery中innerwidth,outerwidth,outerwidth和width的区别
- jQuery实现当按下回车键时绑定点击事件
- jquery案例2——点击事件添加样式、鼠标经过事件、鼠标离开事件、一组、多组样式
- jQuery EasyUI 应用 - 创建 RSS Feed 阅读器
- 通过jquery库扩展移动端‘长按触发’事件(模拟浏览器‘长按识别二维码’功能)