jQuery घटनाओं संलग्न तत्वों

Question

मैं इस साइट here

है के लिए काम नहीं करता है "छवियां" और "वेब टेम्पलेट्स" टैब जहां छवियों दाईं से बाईं ओर फिसलने रहे हैं के लिए एक छोटे से छवि स्लाइडर है के रूप में आप देख सकते हैं , फिर गायब हो जाता है और फिर यह मूल तत्व के बहुत अंत में दिखाई देता है (मेरे मामले में एक <tr>)।

यदि आप छोटी छवियों पर होवर करते हैं तो आप बाईं ओर इसका पूर्वावलोकन देख सकते हैं।

अभी तक इतना अच्छा है।

लेकिन यदि आप पहली छवियों को फिर से आने तक प्रतीक्षा करते हैं, तो होवर ईवेंट अब और काम नहीं करता है।

यह संभव है कि <tr> टैग के अंत में jquery नए संलग्न तत्वों को नहीं देख सके?

Answer 1

जिस तरह से आप अपनी घटनाओं को बाध्य कर रहे हैं वह गतिशील रूप से जोड़े गए तत्वों के लिए काम नहीं करेगा। preview_script.js में आप हैं:

$(".box_body img").hover(function(){ 

इस वर्ग में "box_body", लेकिन जो कि बाद में जोड़ दिए जाते हैं नहीं घटना मिल जाएगा के साथ सभी img टैग के लिए eventhandlers जोड़ देगा।

इस प्रयास करें:

$(document).on("hover", ".box_body img", function() {..}); 

इस दस्तावेज़ के लिए ईवेंट जुड़ जाएगा, और केवल यह आग अगर eventtarget वर्ग = "box_body" के साथ img है। चूंकि घटनाएं फैलती हैं, तब तक इसे तब तक काम करना चाहिए जब तक कि दस्तावेज़ में पहुंचने से पहले कुछ भी नहीं हो जाता है ("event.stopPropagation()" को कॉल करके)

यदि आप ".box_body img" के माता-पिता को जानते हैं तो आप दस्तावेज़ को प्रतिस्थापित कर सकते हैं कि, यह थोड़ा बेहतर काम करेगा क्योंकि आपको घटना के लिए दस्तावेज़ तक प्रचार करने की प्रतीक्षा नहीं करनी है।

ध्यान दें कि आप एक ही बात प्रतिनिधि के प्रयोग से कर सकते हैं (यदि पर उपलब्ध नहीं है):

$(document).delegate(".box_body img", "hover", function() {..}); 

Answer 2

आप क्रम में jQuery के .live() फ़ंक्शन का उपयोग करने के तत्वों के लिए ईवेंट हैंडलर्स अनुलग्न करना चाहते हैं जाएगा जो भविष्य में बनाया जाएगा। यहाँ डॉक है: http://api.jquery.com/live/ यहाँ उपयोग है:

$(".dynamicButtons").live("hover", function() { 
    //do stuffs 
}); 

Answer 3

कुछ कोड वहाँ उपयोगी हो जाएगा।

क्या आप शुरुआत से वस्तुओं को हटा रहे हैं, और फिर स्लाइडर के अंत में उन्हें डालने?

अगर जवाब "हाँ", आप

$('selector subselector').hover(function() { 
    //your code there 
}); 

के बजाय

$('selector').delegate('subselector', 'hover', function() { 
    //your code there 
}); 

का उपयोग करें और अधिक जानकारियां के लिए http://api.jquery.com/delegate/ जांच होनी चाहिए।

Answer 4

मैं आपको सलाह देता हूं कि आप livequery का उपयोग करें जो आपको जावास्क्रिप्ट में नए जोड़े गए तत्वों के साथ मिलकर मदद करेगा।उपयोग का एक उदाहरण होगा:

$('.elementAdded').livequery('event',function(){ 
    //do stuff 
}) 

मैं .on() का उपयोग कर के रूप में यह आइटम के लिए घटनाओं को केवल एक बार के लिए बाध्य होगा (दस्तावेज़ उदाहरण के लिए तैयार करने के बाद) कई मुद्दों था।

उम्मीद है कि यह मदद करता है।

Answer 5

अपने script.js परिवर्तन फ़ाइल यहाँ http://web-art.netau.net/script.js

$(".box_body img").hover(function(){ 
      var src=$(this).attr("src"); 
      var target=$(this).parents("table").attr("id").split("_").pop(); 
      $("#preview_"+target).attr({src:src}); 
}) 

लाइन 112 116 करने के लिए निम्नलिखित

$(document).on('mouseenter',".box_body img",function(){ 
     var src=$(this).attr("src"); 
     var target=$(this).parents("table").attr("id").split("_").pop(); 
     $("#preview_"+target).attr({src:src}); 
}); 

इस के पीछे कारण के लिए इतना में कई बार जवाब दिया गया है। एक अच्छा जवाब खोजें और खोजें।

तरह

Event binding on dynamically created elements?

In jQuery, how to attach events to dynamic html elements?

jquery binding events to dynamically loaded html elements