jquery। AJAX प्रस्तुत तत्वों पर काम नहीं कर रहे हैं

Question

मेरे पास कुछ तत्व हैं जो AJAX कॉल से बनाए गए हैं। उन तत्वों के भीतर, एक बच्चा तत्व होता है जब छिद्रित गतिशील रूप से बनाए गए किसी अन्य बच्चे तत्व को दिखाने की आवश्यकता होती है। जब मैं एक पहेली में .hover jquery चलाता हूं, तो यह ठीक काम करता है। जब मैं इसे अपने कोड में कार्यान्वित करता हूं, तो यह काम नहीं करना चाहता।

मैं सोच रहा था कि यह .hover स्क्रिप्ट लोड होता है जब तत्व AJAX से लोड होते हैं। क्या किसी को दूसरे से पहले जाना है? .hover स्क्रिप्ट चलाने से पहले AJAX तत्वों को लोड करने की प्रतीक्षा करने के लिए अधिनियमित किया जाना चाहिए?

यहां मेरे उदाहरण के fiddle है।

Answer 1

मैं समझता हूँ मतलब के लिए अपने प्रश्न है कि आप एक तत्व है कि अभी तक अस्तित्व में नहीं हो सकता है के लिए एक घटना संलग्न कर रहे हैं। तत्व को बाध्य करने के बजाय (जो .hover() के लिए शॉर्टेंड है) आपको इसे स्थायी कंटेनर तत्व में प्रतिनिधि देना चाहिए। आप jQuery संस्करण के आधार पर delegate() या .on() के साथ ऐसा कर सकते हैं।

यहाँ क्या यह आपके बेला में इस तरह दिखाई देगा: http://jsfiddle.net/7dcuh/15/

Answer 2

आपको तत्वों को सम्मिलित करने के बाद AJAX की सफलता कॉलबैक में होवर स्क्रिप्ट निष्पादित करने की आवश्यकता है।

Answer 3

सामग्री अजाक्स के साथ उत्पन्न होता है, तो आप livequery

Answer 4

गतिशील रूप से उत्पन्न तत्वों के लिए इस्तेमाल करना चाहिए, घटनाओं तत्व या दस्तावेज़ वस्तु के स्थिर माता-पिता में से एक से सौंप दिया जाना चाहिए, आप on या delegate विधि का उपयोग कर सकते हैं।

$(document).on({ 
    mouseenter: function() { 
     $(this).next('.show').fadeIn(800); 
    }, 
    mouseleave: function() { 
     $(this).next('.show').delay(800).fadeOut(800); 
    } 
}, '.touch'); 

Answer 5

यह सही जवाब नहीं हो सकता है, लेकिन मैं तत्वों एक समारोह के भीतर बनाई गई हैं कि मिल गया है। फ़ंक्शन के भीतर घोषित होने के लिए उनके चयनकर्ता की आवश्यकता है। इसलिए जैसा:

function createEle(){ 
    $('#element').after('<div id="newEle"><div id="inner" style="display:none;"></div></div>'); 
    $('#newEle').hover(function(){ 
     $('#inner','#newEle').show(); 
    },function(){ 
     $('#inner','#newEle').hide(); 
    }); 
} 

Answer 6

चेक बाहर .on() फ़ंक्शन का उपयोग कर आस्थगित घटनाओं। शुद्ध सीएसएस समाधान होगा

$('#parent').on('hover', '.touch', function() { 
    $(this).next('.show').fadeIn(800); 
}, 
function(){ 
    $(this).next('.show').delay(800).fadeOut(800); 
}); 

या,:

.touch + .show { 
    display:none; 
} 
.touch:hover + .show { 
    display:block; 
} 

Answer 7

आप ajax प्रतिक्रिया अंदर स्क्रिप्ट सम्मिलित करने के लिए प्रयास करना चाहिए आप तरह की एक घटना कर सकते हैं।

<script> </script> 

की तरह या आप स्क्रिप्ट की सेवा ajax कॉल पूर्ण या सफलता

jQuery.ajax({ 

success:function(){jQuery('selector').yourfunction();}, 

     }); 

है जब यदि आप नहीं है, स्क्रिप्ट चलेंगे और डोम में चयनकर्ताओं और स्क्रिप्ट अभ्यस्त नहीं चला पाते हैं फिर