गतिशील रूप से जेनरेट किए गए मोडल पॉपअप में पंजीकरण नहीं कर रहे jQuery 'ऑन'

Question

मैं इस धारणा के तहत था कि jQuery का on इवेंट हैंडलर गतिशील रूप से बनाए गए तत्वों के लिए 'सुन' करने में सक्षम था और यह live के व्यवहार को प्रतिस्थापित करना था। हालांकि, मैंने जो अनुभव किया है वह है कि on का उपयोग क्लिक ईवेंट को कैप्चर नहीं कर रहा है जबकि live का उपयोग कर रहा है!

मेरी स्थिति की मुश्किल पहलू यह है कि मैं न केवल गतिशील सामग्री बनाने रहा हूँ, लेकिन मैं एक AJAX .get() कॉल के माध्यम से यह कर रहा हूँ, और एक मॉडल .dialog() jQueryUI पॉपअप में परिणामी HTML डालने है। मैं इस जो जो मैं अपने on घटना लेखन के करीब पहुंच गया था पाया

$.get("getUserDataAjax.php", queryString, function(formToDisplay) { 
    $("#dialog").dialog({ 
     autoOpen: true, 
     modal: true, 
     buttons... 
    }).html(formToDisplay); 
}); 
$(".classThatExistsInFormToDisplay").on("click", function() { 
    alert("This doesn't get called"); 
}); 

on के लिए दस्तावेज़ से::

यहाँ मैं क्या हासिल करने की कोशिश कर रहा था की एक सरलीकृत संस्करण ($(document).ready(...) में लिपटे) है

$("p").on("click", function(){ 
    alert($(this).text()); 
}); 

हालांकि, किसी कारण से, live मैं उम्मीद के रूप में काम करेंगे - जबकि on मुझे असफल रहा है।

इस के लिए सवाल नहीं है क्योंकि मैं ने पाया है कि on सफल होगा (कब्जा क्लिक) अगर मैं इसेfunction(formToDisplay) कॉलबैक अंदर घोषित "मैं यह कैसे काम कर सकते हैं"।

मेरा प्रश्न है:on के साथ क्या गलत है कि यह एक मोडल पॉपअप के भीतर मेरे गतिशील रूप से बनाए गए तत्व नहीं ढूंढ रहा है? मेरा jQuery उदाहरण jquery-1.7.2 है। jQueryUI 1.8.21 है।

यहां दो जेएसफ़िडल्स हैं जो इस मुद्दे का अनुमान लगाते हैं। विभिन्न व्यवहार देखने के लिए दोनों उदाहरणों में "टेस्ट" शब्द पर क्लिक करें। कोड में एकमात्र अंतर on को live के लिए बदल रहा है।

जहां the clicklive द्वारा कब्जा कर लिया गया है।

जहां the clickon द्वारा कब्जा नहीं किया गया है (कुछ भी नहीं होने के लिए 'टेस्ट - मुझे क्लिक करें' पर क्लिक करें)। क्यों यह काम नहीं कर रहा है (लेकिन यदि आप कुछ बहुत चतुर है, साझा करने के लिए स्वतंत्र लग रहा है)

मैं मैं सिर्फ on अनुचित तरीके से उपयोग किया जा सकता है या कुछ है कि इरादा नहीं था क्या करने के लिए यह पूछ एहसास लेकिन मैं जानना चाहता हूँ। आपके ज्ञान के लिए धन्यवाद!

अद्यतन/उत्तर/समाधान:

उपयोगकर्ता के अनुसार 'अनिर्धारित', अंतर यह है कि ondocument वस्तु जबकि live करता है के ऊपर से सभी तरह से नहीं सौंपी है/है।

क्लाउडियो का उल्लेख है, वहाँ on प्रलेखन संदर्भ डायनामिक रूप से तैयार तत्वों के कुछ भागों रहे हैं और कि क्या आप क्वेरी क्रम पर मौजूद हैं की जरूरत के $("") भाग में शामिल हैं।

यहां मेरा नया समाधान है: कैप्चर पर क्लिक करें on मेरे मोडल डायलॉग, जो कि रनटाइम पर ईवेंट बनने पर कोई सामग्री नहीं है, लेकिन जेनरेट होने वाली विशेष कक्षा के साथ मेरी सामग्री और तत्व ढूंढ पाएगा बाद में।

$("#dialog").on("click", ".classThatExistsInFormToDisplay", function() { 
    ... //(success! Event captured) 
}); 

बहुत बहुत धन्यवाद!

Answer 1

live प्रतिनिधियों दस्तावेज़ ऑब्जेक्ट से घटना है, लेकिन on नहीं करता है

$(document).on("click", ".clickHandle", function() { 
    alert("Content clicked"); 
}); 

: 'टी, यदि आप on पद्धति का उपयोग करके घटना सौंपना चाहते हैं, तो आप घटना तत्व के स्थिर माता-पिता में से एक या document वस्तु से प्रतिनिधि चाहिए

Answer 2

समस्या यह है कि जिस तत्व को आप ईवेंट संलग्न करते हैं वह मौजूद होना चाहिए।

आप

$("#existingContainerId").on("click", "p", function(){ 
    alert($(this).text()); 
}); 

यदि आप उपयोग करने के लिए कोई प्रासंगिक मौजूदा कंटेनर है, तो आप इस्तेमाल कर सकते हैं on उपयोग करने के लिए इस p डायनामिक रूप से तैयार टैग पर क्लिक हासिल करने की तरह है $("body") या $(document)

हैं चयनकर्ता छोड़ा गया है या शून्य है, घटना हैंडलर को प्रत्यक्ष या सीधे बाध्य कहा जाता है। हैंडलर को हर बार चयनित तत्वों पर एक घटना होती है, चाहे वह सीधे तत्व या बुलबुले पर एक वंशज (आंतरिक) तत्व से होती है।

जब कोई चयनकर्ता प्रदान किया जाता है, तो ईवेंट हैंडलर को प्रतिनिधि के रूप में जाना जाता है। जब ईवेंट सीधे बाध्य तत्व पर होता है तो हैंडलर को नहीं कहा जाता है, लेकिन केवल चयनकर्ताओं से मेल खाने वाले वंशज (आंतरिक तत्व) के लिए होता है। jQuery घटना से लक्ष्य को उस तत्व तक लक्षित करता है जहां हैंडलर संलग्न होता है (यानी, बाहरी तत्व के लिए सबसे ऊपर) और चयनकर्ता से मेल खाने वाले पथ के साथ किसी भी तत्व के लिए हैंडलर चलाता है।

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

को खंड प्रत्यक्ष एक नजर डालें वर्णित है और प्रत्यायोजित घटनाओंhere अधिक जानकारी के लिए