jQueryの異なるバインド内のdivとボタンのバインド

Question

私はページから行を削除するために使用されるリスト行の中にボタンを持っています（行に表されるオブジェクトを削除するためにajaxを呼び出すが、それは重要ではない質問）。行全体は、別のページにリダイレクトされるクリックイベントにバインドされています。

言い換えれば、内包する行はクリックバインドであり、内側のボタンはクリックバウンドです。内側のボタンをクリックすると、（必要に応じて）含まれる行のクリックイベントがトリガーされるため、問題が発生します。 、これは非常にうまく機能していない

$('.delete-button').hover(
    function() { 
    $('.list-row').unbind(); 
    $('.delete-button').bind('click', function() { /* delete action */ }); 
    }, 
    function() { 
    $('.delete-button').unbind(); 
    $('.list-row').bind('click', function() { /* list row action */ }); 
    } 
); 

：

私はすべての行をマウスオーバーをクリックしてアンバインドボタンを削除するためのホバーイベントを結合しようとした、および以下この擬似コードのように、マウスアウトでそれを再バインドしてきました私はそれにアプローチするより良い方法があると確信しています。私は含むリストの行からボタンを取る必要がありますか？私のリスト行には、ajax呼び出しに必要なデータを持つカスタム属性が含まれているため、データを取得するのにちょうどvar rid = $('.delete-button).parent().attr('row-id');できますが、私は変更することに反対していません:)

ありがとう！

Answer 1

ボタンのクリックイベントハンドラでは、e.stopPropagation()を呼び出す必要があります。これにより、イベントがDOMツリーをバブリングするのを防ぎます。詳細：http://api.jquery.com/event.stopPropagation/

---

編集：（！ありがとう）あなたは既に受け入れ、多分このコードスニペットは、より良い概念のいくつかを説明するのに役立つでしょう：

$('.list-row').click(function() { 
    /* list row action */ 
}); 

$('.delete-button').click(function(e) { 
    // die, bubbles, die 
    e.stopPropagation(); 
    // if you also need to prevent the default behavior for the button itself, 
    // uncomment the following line: 
    // e.preventDefault(); 
    // note that if you are doing both e.stopPropagation() AND e.preventDefault() 
    // you should just `return false;` at the end of the handler (which is jQuery- 
    // sugar for doing both of these at once) 

    /* delete action */ 
}) 

Answer 2

ありますあなたのハンドラ関数がfalse

Answer 3

を戻ってみましょうこれに近づくにはいくつかの方法があります。 @ jmar777はすでにボタン上のクリックハンドラに変更されたイベントを添付して伝播を停止すると述べています。

あなたはdiv要素に適用しているのと同じ機能でこれを行うにしたい場合は、あなたがそのように近づくことができるが：

if($(event.target).is("input")) { 
     event.stopPropagation(); 
} 

別のアプローチは、実際にボタンにクリックイベントをバインドしないことです、ブラウザはいつでも包含要素のクリックをサポートしています。あなたは常にそれを引き起こすので、実際にボタンを処理する必要はありません！これはあなたが他のすべてから少し違ってIE6などを処理する必要があります...