e.stopPropagation() अपेक्षित के रूप में काम नहीं कर रहा है?

Question

I have a simple table:

टी.आर. <tr onclick='alert("row");'>

है और बटन है:

$("body").on('click',".b",function (e){ 
    alert('button'); 
    e.stopPropagation(); 
}); 

हालांकि - हालांकि मैं लिखा e.stopPropagation(); यह अभी भी अलर्ट: "पंक्ति, बटन"।

अब, मुझे पता है कि ईवेंट हैंडलर body से जुड़ा हुआ है और चयनकर्ता (बटन पर इसके खिलाफ चेक किया गया है क्लिक करें प्रारंभ और शरीर के लिए ऊपर ले जाने के लिए, बस करने के लिए $.live उपयोग की तरह लेकिन document के खिलाफ ...)।

लेकिन जांच button पर क्लिक करें और पर पर क्लिक करें।

ऐसा लगता है कि जब मैं पर क्लिक कर रहा हूँ, यह "body" को प्रसारित और (क्योंकि मैं इसे करने के लिए ईवेंट हैंडलर संलग्न) जबकि शरीर अप करने के लिए अपनी तरह से यह TR पर क्लिक सक्रिय करता है।

यहां क्या हो रहा है? मैं अपना कोड कैसे रख सकता हूं (शरीर से संलग्न) और अभी भी "बटन" की चेतावनी है।

पी।

मैं जानता हूँ कि मैं बस कर सकते हैं:

$(".b").on('click',function (e){ 
    alert('button'); 
    e.stopPropagation(); 

}); 

लेकिन मैं जानना चाहता है कि मेरे वर्तमान कोड does not काम करना चाहते हैं (!)।

Answer 1

समस्या यह है कि आप इवेंट हैंडलर को body पर अटैचमेंट कर रहे हैं, भले ही यह .b तत्व पर प्रतिनिधि हो। इस ईवेंट हैंडलर को केवल tr ईवेंट हैंडलर के नाम से बुलाया जाता है, इसलिए प्रचार को रोकने में बहुत देर हो चुकी है।

मैं तुम्हें गतिशील रूप से जोड़ा तत्वों से निपटने के लिए करना चाहते हैं और बस td को ईवेंट हैंडलर को नहीं बांध सकता लगता है के रूप में, मैं आप इस सुझाव है कि कर सकते हैं:

$('body').on('click',"tr",function (e){ 
    alert('row'); 
}); 
$("body").on('click',".b",function (e){ 
    alert('button'); 
    e.stopPropagation(); 
}); 

Demonstration

Answer 2

... लेकिन मैं जानना चाहता हूं कि मेरा वर्तमान (!) कोड क्यों काम नहीं करता है।

jQuery डॉक्स से, घटना प्रतिनिधिमंडल के साथ event.stopPropagation पर:

के बाद से .live() विधि घटनाओं संभालती है एक बार वे दस्तावेज़ के शीर्ष करने के लिए प्रचारित किया है, यह संभव नहीं प्रसार को रोकने के लिए है लाइव घटनाओं का। इसी प्रकार, .delegate() द्वारा संचालित ईवेंट को उन तत्वों के प्रचारित करेंगे जिनके लिए उन्हें प्रतिनिधि दिया गया है; पर दिए गए ईवेंट हैंडलर डीओएम पेड़ में से पहले के किसी भी तत्व को पहले से ही निष्पादित किया गया है जब प्रतिनिधि कार्यक्रम हैंडलर को बुलाया जाता है। ये हैंडलर, इसलिए, प्रतिनिधि हैंडलर को कॉलिंग ईवेंट.स्टॉपप्रॉपैगेशन() या झूठी लौटने से ट्रिगर करने से रोक सकता है।

live और delegate अब on तो यह लागू होता है कर रहे हैं।

Answer 3

हो सकता है, बस जैसे (यहां तक ​​कि साथ inline javascript<tr> टैग से संलग्न) बटन दबाए ईवेंट प्रबंधन देते हैं -

$("td").on('click',".b",function (e){ 
    alert('button2'); 
    e.stopPropagation(); 
}); 

या - इसके बजाय <tr> में inline घटना देने के, यू give- कर सकते हैं

$(document).on('click',".b",function (e){ 
    alert('button'); 
    e.stopPropagation(); 
}); 

$(document).on('click',"tr",function (e){ 
    alert('tr'); 
    e.stopPropagation(); 
});