3

以下のクリックイベントに添付された削除リンクをそれぞれに含む一連のdivがあります。

  var observeRemoveRoom = function
    $('.remove_room').click(function(){     
      $(this).parent().removeClass('active');
    });
  }

それをクリックすると、親（div）の「アクティブ」クラスが削除されます。observeRemoveRoom私はこの関数をウィンドウロードで呼び出します。これは正常に機能します。

問題は、同じdivをさらに追加する別の関数があるということです。a.remove_room新しいdivに含まれているリンクが存在しなかったのでwindow.load、を呼び出す必要がありますobserveRemoveRoom。

どういうわけかイベントハンドラーを複製していますか？jQueryはそれらを上書きしますか？もしそうなら、ハンドラーのバインドを解除する必要がありますか？

4

3 に答える 3

1

はい、もう一度呼び出すとイベントハンドラーが複製されますが、最初のリスナーがトリガーされた後にクラスが見つからない場合に何もしないメソッドをobserveRemoveRoom呼び出しているだけなので、目立たないかもしれません。removeClass

代わりに、次のように、毎回クリック イベントのバインドを解除して再バインドできます。

 var observeRemoveRoom = function(){
    var remove_class = function(){     
      $(this).parent().removeClass('active');
    };
    $('.remove_room').off('click', remove_class).on('click', remove_class);
  }

ただし、次のように、毎回イベントをバインドおよびバインド解除するのではなく、この関数の外でこれを行うことをお勧めします。

$(document).ready(function(){
    var remove_class = function(){     
      $(this).parent().removeClass('active');
    };
    // If the element exists at dom ready, you can bind the event directly
    $('.remove_room').on("click", remove_class);
    // If the element is added in dynamically, you can [delegate][1] the event
    $('body').on("click", '.remove_room', remove_class);
    // Note: Although I've delegated the event to the body tag in this case
    // I recommend that you use the closest available parent instead
});

http://api.jquery.com/on/#direct-and-delegated-events : [1]

于 2012-07-11T10:52:38.650 に答える
1

ライブ クエリを試して最新の状態に保つことができます: http://docs.jquery.com/Plugins/livequery

于 2012-07-11T10:52:43.043 に答える