Question

我正在生成这样的动态DOM对象：

$('<div />')
    .append($('<img />').attr('src', 'blabla'))
    .click(function (e) {
        e.preventDefault();
        alert('ok');
    })
    .appendTo('body');

当然代码要复杂得多。但是经过一段时间（一些事件（包括一些AJAX调用和DOM操作）），当我点击img时，什么都不会发生。在代码中的某处，某些内容已删除了click()函数！

我想知道何时。

有没有办法做一个断点/查找/当有一个代码删除我的＆＃34; click()＆＃34;处理程序？

Answer 1

正如你所说，你已经动态创建了一切。（div和image都是）

您需要将int val; if(query.next()) val = query.value(0).toInt();处理程序与.click()

分开

.append()

这称为jQuery event delegation

示例代码段： -

＆＃13;

$(document).on('click','img',function(){
   e.preventDefault();
   alert('ok');
});

＆＃13;

$('<div />').append($('<img />').attr('src', 'https://orig00.deviantart.net/0490/f/2016/193/8/a/icons_never_die__by_sinfulgurorose-da9rrty.png')).appendTo('body');

$(document).on('click','img',function (e) {
  e.preventDefault();
  alert('ok');
});

＆＃13;

注意： - 简单的事件处理程序无法解决动态添加的元素。您必须使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

使用img上的类进行事件委派，例如

// this will bind click event on all images having class image only
$(document).on('click','img.image', function (e) {
    e.preventDefault();
    alert('ok');
});

如何检测何时删除click事件？

2 个答案: