jquery动态新增元素节点.click点击事件失效的2个解决方法

jquery

问题:

ajax读取留言列表,每条留言后面有个回复按钮,class为“reply”,用$(“.reply”).click(function(){ //do something… }),后面通过ajax加载进来的列表中的回复按钮,点击事件会失效。

解决方法:

最简单的方法就是直接在标签中写onclick=””,但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件。

演示页面代码:

<p id="pLabel">新加一条</p>
<ul id="ulLabel">
 <li class="liLabel">网页制作方法</li>
 <li class="liLabel">网页设计巧</li>
 <li class="liLabel">如何制作漂亮的网页?</li>
</ul>
<script type="text/javascript">
$("#pLabel").click(function(){
 $("#ulLabel").append('<li class="liLabel">aaaQ</li>'); //动态向ul的末尾追加一个新元素
});
</script>

click点击事件失效的解决方法一:使用live

live()函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数。

通过live()函数适用于匹配选择器的当前及未来的元素。比如,通过脚本动态创建的元素。

实现如下:

$('.liLabel').live('click', function(){
 alert('OK');
});

方法二:使用on

可以通过on方法绑定事件,可以绑定到它的父级或者body中,实现如下:

$("#ulLabel").on('click','.liLabel',function(){
 alert('OK')
});

或者:

$("body").on('click','.liLabel',function(){
 alert('OK')
});

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3265.html

(0)
上一篇 2019年2月15日 下午1:55
下一篇 2019年2月16日 下午9:42

99%的人还看了以下文章

  • 第5课:文本

    文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解: text-indent text-align text-decoration letter-spacing text-transform 文本缩进[text-indent] CSS属性text-indent用于为段落设置…

    2020年2月22日
    2.0K0
  • 第11课:边框(border)

    边框(border)可以有多种用途,比如作为装饰元素或者作为划分两物的分界线。在设置边框方面,CSS为你提供了无尽选择。border-widthborder-colorborder-style 边框宽度[border-width] 边框宽度由CSS属性border-width定义,其值可以是“thin”(薄)、“medium”(普通)或“thick”(厚)等…

    2020年2月25日
    1.9K0
  • 网页制作常用正则表达式大全、正则表达式在线测试工具

    正则表达式,用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。正则表达式经常被用于字段或任意字符串的校验。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。 正则表达式在线测试工具 regex101是一个非常不错的正则表达式在线测试工具,你可以直接在线测试你的正则表达式。 网页制作常用正则表达式 1 用户名正则 //用户名正则,4到…

    2018年9月12日
    2.9K0
  • 给网页中的按钮和图片添加声音

    Loud links-是一款大小只有1.5KB的WEB音效插件,可以实现网页中按钮与图片等元素的触发交互,比如鼠标放上去后出现响声,或者鼠标点击后出现响声。Loud links使用相当简单。 使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…

    2018年2月6日
    4.0K0
  • js判断输入字符串是否为空、空格、null总结

    本文总结了在用户输入表单数据时,如何使用JS判断输入空格,为空或null的三种情况。

    2021年11月30日
    4.1K0
  • HTML5画布(Canvas)速查表

    HTML5 <canvas> 标签用于绘制图像。<canvas> 元素本身仅仅是图形的容器,必须使用脚本来完成实际的绘图任务。HTML5 <canvas> 可用于在画布上绘制文本、线条、矩形、圆形等等。 HTML5画布(Canvas)元素 <canvas id=”myCanvas” width=”500″ heigh…

    2018年2月20日
    2.1K0

发表回复

登录后才能评论