jquery - 2 つのイベントが発生しました。他のイベントを無視して無効化/バインド解除するにはどうすればよいですか

Question

私はこのsudo htmlを持っています

<ul>
<li id="434" class="home-page-item" >
<div id="x_434" class="home-page-item-foot remove-tile"></div>
<div class="home-page-item-div">
    </li>
 </ul>

私はこれらのonclicksを持っています

$( '.remove-tile').live("click", function(event){
      event.preventDefault();
      removeTile();
});  

$( ".home-page-item" ).live("click", function(event){
      console.log("Here as well");
      do_some_otherstuff():
});  

私が抱えている問題は、人が remove-tile div をクリックすると、.home-page-item onclick も後に発生することです。2 番目のホームページ アイテムの発火を防ぐ方法はありますか? たぶんバインドを解除すると思いますが、それを使用する方法がわかりません

ありがとう

Answer 1

$( '.remove-tile').live("click", function(event){
      event.stopImmediatePropagation();
      removeTile();
});  

$( ".home-page-item" ).live("click", function(event){
      console.log("Here as well");
      do_some_otherstuff():
});

Answer 2

関数に return false を追加します。イベントの伝播が原因で発生しています。では、 return false を使用して、デフォルト ( ) およびイベントの伝播jQueryを防ぐことができます。preventDefault

$( '.remove-tile').live("click", function(event){
      removeTile();
      return false;
});  

$( ".home-page-item" ).live("click", function(event){
      console.log("Here as well");
      do_some_otherstuff():
      return false;
}); 

Answer 3

これは、イベント バブリングが原因です。 event.stopPropagation(); クリック イベントに追加します。

$('.remove-tile').live("click", function(event) {
    event.stopPropagation();
    removeTile();
});