3

要素は、マウスが上にあるときにリスト項目に追加され、マウスが離れると切り離されます。

要素がクリックされると切り離され、それが含まれていたリスト項目が 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');

私のコードに似たフィドルの例を設定しました。

問題は、要素が発火前に切り離されているにもかかわらず、この要素のクリック リスナーもリスト アイテムと共に削除される$.remove()ため、影響を受けないことです。

ここで何が間違っていますか？

4

2 に答える 2

6

delKnobあなたが起こっていると信じていることは正しいliですli.delKnob良い。

console.log()コードにa を追加して、これをテストしました。

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

の を削除して、これを修正delKnobしsetTimeoutます。

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

delKnobこれは、要素にクラスを追加することを前提としています。

デモ: http://jsfiddle.net/AHjRN/

補足として、全体を単純化し、すべてに adelKnobを追加するだけliです。次に、それらを表示/非表示にするだけで、ハンドラーの削除について心配する必要はありません。また、コードをかなり簡素化します。

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/

于 2013-06-12T20:25:42.950 に答える
1

delKnob(再) 移動される にイベントをバインドする代わりに、イベント委任を使用して、クリックされた子孫this.cartを処理するコンテナー ( )にイベントをバインドできます。.delKnob

delKnob = $('<i class="delKnob" />').text('×');      

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

デモ

于 2013-06-12T20:27:11.263 に答える