针对js动态添加元素后,事件处理不起作用的解决方案。

不起作用的代码:

例子:$(".baby").on("click",function(){

 $(this).parent().parent().parent().append("<tr><td><input class='baby'  type='text'></td><td><input  class='reel' type='text'></td><td><input class='ifxreel'  type='text'></td><td><input class='ifxbox' type='text'></td></tr>") ;            

  })

上面的代码添加的新元素,class=“baby”的元素,在点击了之后没有了实现我们想要的点击功能。

解决方案:

$('body').on("click",'.baby',function(){
    $(this).parent().parent().parent().append("<tr><td><input class='baby'  type='text'></td><td><input  class='reel' type='text'></td><td><input class='ifxreel'  type='text'></td><td><input class='ifxbox' type='text'></td></tr>") ;  

})

改过后的代码,完全解决了之前的麻烦,当然你也可以将click事件封装成一个函数方法,在添加元素的后面再调用此方法。只是代码量会增加一倍。所以用以上方法,我认为是最好的。

猜你喜欢

转载自my.oschina.net/u/3786589/blog/1790377