गतिशील रूप से गतिशील HTML

Question

लिए jQuery ईवेंट हैंडलर्स जोड़ने मैं एक div अनुभाग है कि मैं गतिशील jQuery ajax के माध्यम से पॉप्युलेट कर रहा हूँ है:

$('#treeview').append(data.d); 

कहाँ डेटा अलग आईडी के साथ नेस्टेड divs का एक समूह है।

मैं भी कुछ jQuery कोड है कि एक treeview में divs बना देता है, एक +/- विस्तृत/संक्षिप्त करें और गतिशील डेटा आबादी के साथ है:

$('div.tree div:has(div)').addClass('parent'); // Requires jQuery 1.2! 
    $('div.tree div').click(function() { 
     var o = $(this); 
     o.children('div').toggle(); 
     o.filter('.parent').toggleClass('expanded'); 
     BindGridView($(this).attr('id')); 
     return false; 
    }); 

जब मैं मुख्य treeview में divs पेस्ट मुद्दा है div सभी ठीक है। जब मैं गतिशील रूप से सटीक वही पाठ बनाता हूं, हाँ मैंने इसकी तुलना की है, विस्तार/पतन & गतिशील डेटा आबादी काम नहीं करती है; हालांकि मैं अपने पेज पर अपना सही div लेआउट देख सकता हूं।

मेरा अनुमान है कि यह है कि मैं जब मैं कर रहा हूँ

$ ('# treeview') क्लिक करें घटना & addClass जोड़ने की जरूरत है संलग्न (data.d)।

लेकिन मैं यह नहीं समझ सकता कि कैसे।

Answer 1

यदि आप गतिशील रूप से डोम में तत्व जोड़ रहे हैं, तो चयनकर्ता से जुड़े मौजूदा ईवेंट हैंडलर काम नहीं करेंगे (जैसे click)।

आपको नए बनाए गए डीओएम तत्वों से प्राप्त होने वाली घटनाओं के लिए live फ़ंक्शन का उपयोग करने की आवश्यकता है।

---

ऐसा लगता है (as it was in the comments by Zach L) कि jQuery 1.7live के रूप में on के पक्ष में पदावनत किया गया है। सामान्य सलाह वही है (गतिशील तत्वों को ट्रैक करना), केवल तंत्र (on बनाम live) बदल गया है।

Answer 2

आप ईवेंट हैंडलर को गतिशील तत्वों को बाध्य करने के लिए delegate() या live() का उपयोग कर सकते हैं। ज्यादातर मामलों में, delegate() सबसे कुशल मार्ग होगा, जब तक आप भविष्यवाणी नहीं कर सकते कि डीओएम में गतिशील तत्व मौजूद होंगे।

Answer 3

live() बहिष्कृत किया गया है।

docs से

:

उपयोग .on() ईवेंट हैंडलर्स संलग्न करने के लिए। JQuery के पुराने संस्करणों के उपयोगकर्ताओं को .delegate().live() वरीयता में .delegate() का उपयोग करना चाहिए।

Answer 4

डायनामिक क्लिक करने योग्य ऑब्जेक्ट्स बनाना मुझे कुछ समय के लिए भी फॉक्स किया गया था। मैं प्रतिनिधि() फ़ंक्शन को या तो काम नहीं कर सका। आखिरकार मैं इस उदाहरण http://www.rahulsingla.com/blog/2011/03/jqueryui-adding-removing-buttons-dynamically-from-a-jqueryui-dialog

पाया और

var buttonClear = $('#formResult').parent().find('#formMessage'); buttonClear.append("<input type='button' value='Clear message' id='clear'>");

$("#clear").click(function() { // एक रूप आईडी बटन क्लिक कार्रवाई यहाँ });

formResult कर रहा है करने के लिए यह पहले से ही पर संशोधित पेज और फॉर्म मैसेज फॉर्म के बाद प्रदर्शित गतिशील रूप से जोड़ा गया संदेश है जमा किया गया है स्क्रिप्ट संदेश को साफ़ करने के लिए फ़ॉर्म के अंत में एक बटन जोड़ता है।