老师，为什么jQuery不会监听变化后的内容？

Question

$delete_task.on('click',function () {
    var $this = $(this);
    var $item = $this.parent().parent();
    var index = $item.data('index');
    var tmp = confirm('你确定要删除吗？');
    tmp ? delete_task(index) : null;
});

我知道这一段代码是触发点击事件之后执行函数，但是有点不明白为什么第二次删除就不能监听？我想知道原理。。

Answer 1

龙晓秀 2017-03-02 22:35:30

同学你好 ！我是慕课网助教-龙晓秀，很高兴给你解答问题：

老师这边点击删除按钮，就等于遍历每一条数据的索引index，然后在数组中删除传入索引index所对应的数组，然后更新localstorage重新渲染，这边的重点在删除数据后实际上更新了localstorage，重新渲染就等于更新了dom，动态的插入dom无法绑定click事件。

你可以用老师视频的方法，自己封装一个方法，在每次重新渲染dom的同时去执行绑定事件或者写成事件委托也可以：

以click事件为例：

①：普通绑定事件：$('.btn1').click(function(){}绑定

②：on绑定事件：$(document).on('click','.btn2',function(){}绑定

①click事件是在页面加载后，获取的所有类名为btn1的元素，然后绑定了这个click事件，你要是通过其他操作再生成一个btn1元素，它就没有click这个事件；

②而on()事件起到了监听的效果,可以实现动态html元素绑定，比如一开始只有一个btn2元素，你通过某种方法又加了一个btn2元素，这个元素也可以点击，可以无限添加btn2。

总结：on()事件相当于是$(document).click(function(){if(点击的是btn){}})，给document添加了一个click事件，当点击的是btn，事件冒泡原理，从里到外，就相当于点击了document，那么就会执行后面的操作，本质上只给document添加了一个事件，而click()事件是给所有btn添加了click事件。

• 慕粉232520171 #1

  谢谢 我明白了 很有用

• 慕数据0143522 #2

  没有懂。。。

• 慕数据0143522 回复 慕粉232520171 #3

  请问你懂了吗，我还不是很懂，可不可以麻烦你再解释一下

点开查看后面2条评论