घटना गतिशील रूप से बनाए गए तत्व

Question

पर काम नहीं कर रहा है, मैं यह पता लगाने की कोशिश कर रहा हूं कि माउसओवर इवेंट .ऑन हैंडलर के साथ AJAX से गतिशील रूप से बनाए गए तत्व के साथ क्यों काम नहीं करेगा। काम करने के लिए प्रतीत होने वाली एकमात्र चीज कोड के साथ कोड है लेकिन मैं समझता हूं कि इसे बहिष्कृत किया गया है।

$(".dropdown ul li").live("mouseover", function() { 
alert('mouseover works'); 
}); 

हालांकि, जब मैं .on का उपयोग कर प्रयास करें, यह काम नहीं करेगा - कोई बात नहीं क्या विविधताओं मैं कोशिश (document.ready, .mouseover, आदि आदि)

$(".dropdown ul li").on("mouseover", function() { 
alert('mouseover works'); 
}); 

ईवेंट हैंडलर्स पर हैं कोड के नीचे, इसलिए वे अंतिम रूप से निष्पादित कर रहे हैं। किसी के पास कोई विचार है कि मैं क्या गलत कर रहा हूं ??

Answer 1

गतिशील घटना प्रतिनिधिमंडलhttp://api.jquery.com/on/ साथ नव उत्पन्न तत्वों के लिए .on का उपयोग करना - जहां अपने मुख्य चयनकर्ता एक विद्यमान स्थिर माता पिता है:

$(".static-parent").on("event1 event2", ".dynamic-child", function() { 

या अपने मामले में:

$(".dropdown").on("mouseover", "li", function() { 
    alert('mouseover works!!!!!!!!!'); 
}); 

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

इसके अलावा एक डोम तैयार समारोह

jQuery(function($) { // DOM is now ready and $ alias secured 

    $(".dropdown").on("mouseover", "li", function() { 
     alert('mouseover works!!!!!!!!!'); 
    }); 

});