停止伝播が動作しない

Question

tr要素のクリックイベントに対して、内部チェックボックスのイベントのバブリングを停止しようとしています。

私は、次のマークを持っています。しかし、イベント

$(document).ready(function() { 
    $('body').off('click.row').on('click.row', '.row', function() { 
    alert(1); 
    }); 
    $('body').off('change.cb').on('change.cb', '.cb', function(e) { 
    e.stopPropagation(); 
    alert(2); 
    }); 
}); 

：行が動的にリスナーに自動的に動的に追加する要素を追加するので、追加され

<table border="1"> 
    <tr class="row"> 
    <td> 
     Item 1 
    </td> 
    <td> 
     <input type="checkbox" class="cb"> 
    </td> 
    </tr> 
    <tr class="row"> 
    <td> 
     Item 2 
    </td> 
    <td> 
     <input type="checkbox" class="cb"> 
    </td> 
    </tr> 
</table> 

、私は次のコードを使用まだtr要素までバブルアップしています。私も次のように試しました：

e.stopImmediatePropagation(); 
window.event.cancelBubbles = true; 
e.bubbles = false; 

どれもそうではありませんでした。

私はJSFiddleでこの問題を再現：この場合

JSFiddle

Answer 1

を使用すると、マウスのクリックだけので、両方の火災に起こる異なる要素で定義されたさまざまなイベントを持っているので、破壊に対するバブリングなしイベントはありません（行をクリックしているため）チェックボックスをオンにします。

行クリックイベントリスナーをまったく追加しないでください。または、stopPropagationを他のハンドラに移動して、起動を停止してください。

$(document).ready(function() { 
    $('body').off('click.row').on('click.row', '.row', function() { 
    e.stopPropagation(); 
    alert(1); 
    }); 
    $('body').off('change.cb').on('change.cb', '.cb', function(e) {  
    alert(2); 
    }); 
});