【Javascript框架】jquery动态绑定事件函数live()的运用

2013-04-28 04:50 阅读 565 次 评论关闭

我用jquery动态插入节点后,直接绑定click事件,调试半天发现无效,原来需要动态绑定事件,可以用live()函数,如下实例:

 

  1. <html>
  2. <head>
  3. <title>大都网-www.dadu2.com</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
  6. </head>
  7. <body>
  8. <input type="button" value="测试" class="test"/>
  9. <script>
  10. $(function(){
  11. //第一个测试按钮是有效的
  12. $(".test").click(function(){
  13. alert("this is ok");
  14. });
  15. //第二个按钮点击事件就无效了
  16. $('<input type="button" value="测试"/>').insertAfter(".test");
  17. });
  18. </script>
  19. </body>
  20. </html>

 

用live函数就可以了:

 

  1. <script>
  2. $(function(){
  3. $('<input type="button" value="测试"/>').insertAfter(".test");
  4. $(".test").live('click',function(){
  5. alert("all button is ok");
  6. });
  7. });
  8. </script>

 

当然,如果你克隆元素clone(true),带上true参数,事件处理函数也是会被复制的,如下:

 

  1. <script>
  2. $(function(){
  3. $(".test").click(function(){
  4. alert("all button is ok , too !");
  5. });
  6. $(".test").clone(true).insertAfter(".test");
  7. });
  8. </script>
版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:【Javascript框架】jquery动态绑定事件函数live()的运用 | 猎微网

评论已关闭!