javascript stopPropagationが入力フィールドで機能しない

Question

ユーザが選択する値を持つ単純なdiv配列と、自分の番号に入れることができる「その他の」フィールドがあります。私は選択と入力フィールドをクリアするクリアdiv（右下）を持っています。しかし、私はまた、含まれているdivの上でクリックイベントを持っていたい。

私は検索しましたが、何もそのトリックをやっていないようです。近くに来るものはstopPropagationを使用しているので、divをクリックするとdivのスクリプトがトリガーされません。それはすべてのdivで機能していますが、何らかの理由で入力フィールドで機能していません。私は数のスクラバーをクリックするたびに、またはそれを含むdivのリセットスクリプトを呼び出すフィールドに入力してみてください。 stopPropagationを動作させない入力フィールドについて何かありますか？または私は何かが欠けている。私が見つけた他のもののどれもそれを解決するように見えなかった。

HTML

<div id="don_options"> 
    <div class="group"> 
     <div class="col"><span class="don">xxx</span></div> 
     <div class="col"><span class="don">xxx</span></div> 
     <div class="col"><span class="don">xxx</span></div> 
    </div> 

    <div class="group"> 
     <div class="col"><span class="don">xxx</span></div> 
     <div class="col"><span class="don">xxx</span></div> 
     <div class="col"><span class="don">xxx</span></div> 
    </div> 

    <div class="group"> 
     <div class="col"><span class="don">xxx</span></div> 
     <div class="col"><span class="don">xxx</span></div> 
     <div class="col"><span class="don">xxx</span></div> 
    </div> 

    <div class="group"> 
     <div class="col"><span class="don">Other</span><br class="mobile"><input id="other" name="other" type="number" min="3" step=".01" value="" size="25" maxlength="255" class="form-text2" placeholder="Other"></div> 
     <div class="col">&nbsp;</div> 
     <div class="col"><span class="don">Clear</span></div> 
    </div> 
</div> 

Javascriptを

$('#don_options').on('click', function(e) { 
    resetDon(); 
}); 

$('.don').on('click', function(e) { 
    e.stopPropagation(); // stop bubbling to parent element 
    //e.preventDefault(); 
    //e.cancelBubble = true; 
    //e.stopImmediatePropagation(); 

    //lots of buttonesk goodness here 
}); 

$('#other').on('keyup change click', function(e) { 
    e.stopPropagation(); // stop bubbling to parent element 
    //e.preventDefault(); 
    //e.cancelBubble = true; 
    //e.stopImmediatePropagation(); 

    //more goodness here for the input field 
}); 

function resetDon() { 
    //clear "buttons" here 
} 

の視覚のための迅速なスクリーンショットを追加します。ブラックボックスはこのコードで含むdivの

Answer 1

です：

$('.don').on('click', function() { 
    e.stopPropagation(); // stop bubbling to parent element 
    ... 
}); 

eは未定義です。関数のパラメータでなければなりません。

$('.don').on('click', function(e) { 
    e.stopPropagation(); // stop bubbling to parent element 
    ... 
}); 

$.on()の完全なドキュメントを参照してください。イベントは、関数（ハンドラ）のパラメータとして渡す必要があります。もちろん、それと対話したくないときはいつでもスキップすることができます。