jquery中live()与click()方法的区别

来源:互联网 发布:图片上传淘宝变模糊 编辑:程序博客网 时间:2024/06/05 22:29

项目中遇到需要动态生成 div 的控件,对这些 div 控件需要添加 click 事件,刚刚开始尝试如下:

$(".new_div").click(function(){  alert("test");  $(this).addClass("hightlight").children("div").show.end()  .siblings().removeClass("hightlignt").children("div").hide();  });

结果并没有响应。后来查了一下资料:

  1. live 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)
  2. click方法附加的事件处理程序适用于匹配选择器的当前元素
由于我添加的 div 元素是从服务器返回的数据动态加载生成的,通过上面的方法并不能给它绑定click 事件。修改如下:
$(".new_div").live('click',function(){  $(this).addClass("highlight").children("div").show().end()  .siblings().removeClass("highlignt").children("div").hide();  });


结果是可以的。最后尝试用live 绑定 toggle() 方法,代码如下:
 $(".new_div").live('click',function(){  $(this).toggle(function () {  $(this).addClass("highlight").children("div").show().end();  $(this).children("img").attr("src", "image/up.png");  },function () {  $(this).addClass("highlight").children("div").hide().end();  $(this).children("img").attr("src", "image/down.png");  });             $(this).trigger('click');});
注意:
$(this).trigger('click');
的作用在于,让绑定的click 立即生效,如果没加上这一句,那么第一次点击 div 是没有反应的。






0 0
原创粉丝点击