首页 > 技术文章 > 关于jQuery中click&live&on中的坑

lzc978 2019-01-05 13:55 原文

click()方法:

click()方法针对未创建的元素不起作用,譬如用js传入的元素,所以可以使用live()方法来操作未创建的元素属性

live()方法:

1 $("button").live("click",function(){
2   $("p").slideToggle();
3 });

该方法在1.9版本被弃用了。

根据jQuery的官方描述,live方法在1.7中已经不建议使用,在1.9中删除了这个方法。并建议在以后的代码中使用on方法来替代。
  on方法可以接受三个参数:事件名、触发选择器、事件函数。

需要特别注意的是:on方法中间的这个触发选择器就是你将要添加的HTML元素的类名、id或者元素名,使用它就可以实现live的效果。

例如我的html文档中已经有了一个id为parent的div,我将要在这个div内部再动态添加一个class为son的span,然后我为这个span绑定一个事件,那么我需要这样写:

1 $('#parent').on('click','.son',function(){alert('test')});

关于on()方法:

这里也需要注意一下:on()方法,要绑定到父级或者 body

并且$(#list')父级元素必须是已经创建了的元素(就是不是通过js传入的元素)

'#list' 为目标操作元素的父级元素(必须是已经存在元素) |  'click' 为需要操作的元素属性  |  '.pure-u-3-4 a' 是目标操作元素

1 $('#list').on('click','.pure-u-3-4 a', function () {
2     alert("haha")
3 })

通过这样一番折腾,最终才能弹出haha 

推荐阅读