गतिशील तत्वों पर .on() और e.stopPropagation() का उपयोग

Question

मैं stopPropagation() का उपयोग कर तत्वों के बाहर क्लिक ईवेंट कैप्चर करने के साथ प्रयोग कर रहा हूं।

$(".container").children().on('click',function(e){ 
    e.stopPropagation();  
}); 
$(".container").on("click",function(){ 
    alert("outside the box?");  
})​ 

Here is a jsFiddle set up to demonstrate it functioning। जब आप सफेद बॉक्स के बाहर कहीं भी क्लिक करते हैं तो एक चेतावनी आग लगनी चाहिए।

अब, मैं गतिशील रूप से बनाए गए तत्वों पर एक ही सिद्धांत लागू करने की कोशिश कर रहा हूं। जहां तक ​​मैं समझता हूं, on() jQuery में ईवेंट असाइनमेंट की विधि को स्क्रिप्ट को बदले बिना काम करने की अनुमति देनी चाहिए।

Here is a second jsFiddle जहां आपको पहले तत्व बनाने के लिए एक लिंक पर क्लिक करना होगा। एक बार ऐसा करने के बाद, सिद्धांत यह है कि एक ही स्क्रिप्ट काम करेगी, लेकिन ऐसा नहीं है। इस विधि के बारे में मुझे क्या याद आ रही है?

Answer 1

कम शब्द में आप यह काम करता है बनाने के लिए मौजूदा पेरेंट तत्व पर on() रखना होगा:

$('body').on('click', 'a', function(e){ 
    e.preventDefault(); 
    $('<div class="container"><div class="box"></div></div>').appendTo('body'); 
    $(this).remove(); 
}); 

$('body').on('click', '.container > *', function(e){ 
    e.stopPropagation();  
}); 

$('body').on('click', '.container', function(){ 
    alert("outside the box?");  
})​ 

कोड: http://jsfiddle.net/GsLtN/5/

खंड पर आधिकारिक वेबसाइट पर और अधिक विस्तार की जांच '.on()' के लिए 'प्रत्यक्ष और प्रतिनिधि कार्यक्रम'

Answer 2

आपको माता-पिता को .on() बांधना होगा।

आप जो करने का प्रयास कर रहे हैं वह है - किसी ईवेंट के लिए हैंडलर को एक बाध्यकारी से बांधें, फिर जांच करें कि ईवेंट उस चयनकर्ता से मेल खाने वाले तत्व द्वारा ट्रिगर किया गया था या नहीं।

$("body").on("click", '.container',function(){ 
    alert("outside the box?");  
})​ 

अपडेट किया गया बेला here

Answer 3

जब आइटम गतिशील रूप से जोड़ा है, तो आप निकटतम माता पिता है कि निश्चित रूप से नहीं होगा करने के लिए हैंडलर देते हैं चाहिए - अपने मामले में इस body है। आप on() this way to achieve a functionality उपयोग कर सकते हैं कि delegate() पेशकश करने के लिए प्रयोग किया है:

$ (चयनकर्ता के लिए माता-पिता) .on (घटनाओं, चयनकर्ता के लिए गतिशील-बच्चों, हैंडलर);

तो अपने कोड में पुनः के बस इस होगा:

$("body").on('click', '.container', function(e){ 
    var $target = $(e.target); 
    if ($target.hasClass('container')) { 
     alert("outside the box!"); 
    } 
}); 

मैं e.target इस्तेमाल किया जो तत्व वास्तव में घटना शुरू हो रहा लगता है। इस मामले में, मैं यह जांच कर आइटम की पहचान करता हूं कि इसमें container कक्षा है या नहीं।

jsFiddle Demo

Answer 4

The demo.

जब आप बाँध एक तत्व के लिए ईवेंट हैंडलर का उपयोग .on, लक्ष्य आप domcument में मौजूद होना चाहिए करने के लिए बाध्य।

$('body').on('click', '.container > *', function(e){ 
    e.stopPropagation();  
}); 
$('body').on("click",'.container',function(){ 
    alert("outside the box?");  
})​ 

Answer 5

jQuery.on() के लिए प्रलेखन के अनुसार:

घटना संचालकों केवल वर्तमान में चयनित तत्वों के लिए बाध्य कर रहे हैं; वे उस पृष्ठ पर मौजूद होना चाहिए जब आपका कोड .on() पर कॉल करता है।

आप किसी पैरेंट कंटेनर को घटना के लिए बाध्य करना होगा। शायद THIS जैसे कुछ।