javascript - $.remove() 正在从分离的元素中删除事件？

Question

当鼠标悬停在列表项上时，该元素被附加到列表项，当鼠标移开时，该元素被分离。

单击该元素时，它会分离，然后它所属的列表项将从 DOM 中删除。

我的 HTML:

<div id="cart">
    <ul>
        <li> <a data-item="a">item A</a></li>
        <li> <a data-item="b">item B</a></li>
        <li> <a data-item="c">item C</a></li>
        <li> <a data-item="d">item D</a></li>            
        <li> <a data-item="e">item E</a></li>
        <li> <a data-item="f">item F</a></li>
        <li> <a data-item="g">item G</a></li>
        <li> <a data-item="h">item H</a></li>         
    </ul>    

</div>

还有我的 JavaScript:

  function plugin(node, opts){
    var self = this;
        delKnob = $('<i />').text('×');

    this.cart = $(node);

    delKnob
      .on('click', function(){              
        var item = $(this).parent().find('[data-item]').data('item');
        $(this).detach();
        self.remove(item);
      });

    this.cart
      .on('mouseenter', 'li', function(){
        delKnob.appendTo(this);
      })
      .on('mouseleave', 'li', function(){
        delKnob.detach();
      });
  }

  plugin.prototype = {
    remove: function(item){
      var li = this.cart.find('[data-item="' + item + '"]').closest('li');
      li.addClass('removing');
      setTimeout(function(){
        li.remove();   
      }, 500);    
    }
  };

new plugin('#cart');

我设置了一个 fiddle example类似于我的代码。

问题是来自该元素的点击监听器也会随着列表项一起被删除，即使该元素在 $.remove() 触发之前被分离，所以它不应该受到影响.

我在这里做错了什么？

Answer 1

你认为发生的事情是正确的，除了当你分离 delKnob 时，你的鼠标立即进入包含它的 li，这意味着它会重新-附加，所以当 li 被移除时，delKnob 仍然是一个 child ，因此也被移除。

我通过在代码中添加 console.log() 来测试它:

this.cart.on('mouseenter', 'li', function () {
    console.log("delKnob attached!");
    delKnob.appendTo(this);
})

通过移除 setTimeout 中的 delKnob 来解决这个问题:

setTimeout(function () {
    li.find('.delKnob').detach();
    li.remove();
}, 500);

这假设将类 delKnob 添加到元素。

演示:http://jsfiddle.net/AHjRN/

作为旁注，我会简化整个事情，只需向每个 li 添加一个 delKnob。然后您只需显示/隐藏它们，而不必担心删除处理程序。它还大大简化了代码:

function plugin(node, opts) {
      this.cart = $(node);

      this.cart.find('li').append($('<i class="delKnob"/>').text('×').hide());

      this.cart.on('click', '.delKnob', function () {
          var li =  $(this).closest('li').addClass('removing');
          setTimeout(function () {
             li.remove();
          }, 500);
      });

      this.cart.on('mouseenter', 'li', function () {
          $(this).find('.delKnob').show();
      })
          .on('mouseleave', 'li', function () {
          $(this).find('.delKnob').hide();
      });   
};

演示:http://jsfiddle.net/F3Qdp/