jquery - jQuery 中的嵌套点击

Question

我有一个 DIV，当单击它时，它会在其内部添加另一个 DIV。然后，如果我单击新添加的 DIV，它将被删除。

HTML

<div id="container"></div>

jQuery

$('#container').on('click', function(e){

  // Add other DIV
  $( this ).append('<div class="other">XYZ</div>');

  e.stopPropagation();

  // Remove other DIV
  $('div.other').bind('click', function(event){

    $( this ).remove();

    event.stopPropagation();

  });

});

如果我计划有很多子 DIV，这种方法的效率如何？

Answer 1

在另一个事件触发时附加事件可能会导致一些意外的副作用，并使您的 DOM 发生内存泄漏。

作为一般规则，附加处理程序一次，经常运行。

$(document)
    .on('click', '#container', function(e) {
        // Add other DIV
        $(this).append('<div class="other">XYZ</div>');
    })
    .on('click', 'div.other', function(e) {
        $(this).remove();
        e.stopPropagation();
    });