jQuery技术

jquery中动态新增的元素节点无法触发事件解决办法

字号+ 作者:H5之家 来源:H5之家 2015-11-16 09:41 我要评论( )

比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为reply,如果你用的是$(".reply").click(function(){ //do something... }),想必后面通过ajax加载进来的列表中的回复按钮,点击事件会失效。 其实最简单的方法就是直接在标签中写onclick


比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“reply”,如果你用的是$(".reply").click(function(){ //do something... }),想必后面通过ajax加载进来的列表中的回复按钮,点击事件会失效。

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

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法,如下:

为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码:

新加一条



 
  • aaa1

  •  
  • aaa2

  •  
  • aaa3


  • 方法一:使用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')
    });

    现在再试试,肯定就没问题了。

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 7个有用的jQuery小技巧

      7个有用的jQuery小技巧

      2016-02-26 13:02

    • jQuery制作select双向选择列表

      jQuery制作select双向选择列表

      2016-02-26 11:00

    • 全面详细的jQuery常见开发技巧手册

      全面详细的jQuery常见开发技巧手册

      2016-02-26 10:02

    • 强大的jQuery移动插件Top 10

      强大的jQuery移动插件Top 10

      2016-02-25 09:05

    网友点评
    -