jQuery घटना हैंडलर पाश में बनाया

Question

तो मैं इस तरह की घटनाओं की एक समूह है:

$('#slider-1').click(function(event){ 
     switchBanners(1, true); 
}); 
$('#slider-2').click(function(event){ 
     switchBanners(2, true); 
}); 
$('#slider-3').click(function(event){ 
     switchBanners(3, true); 
}); 
$('#slider-4').click(function(event){ 
     switchBanners(4, true); 
}); 
$('#slider-5').click(function(event){ 
     switchBanners(5, true); 
}); 

और मैं एक पाश मैं पहले से ही कुछ इस तरह चला रहा हूँ के माध्यम से उन्हें चलाने के लिए चाहता था:

for(i = 1; i <= totalBanners; i++){ 
    $('#slider-' + i).click(function(event){  
      switchBanners(i, true); 
    }); 
} 

सिद्धांत रूप में जो काम करना चाहिए, लेकिन ऐसा लगता है कि जब मैं दस्तावेज़ लोड करता हूं ... यह किसी भी विशिष्ट div आईडी का जवाब नहीं देता है, जैसे इसे क्लिक करना चाहिए ... यह प्रत्येक div के माध्यम से प्रगति करता है चाहे मैं क्लिक करता हूं। ऐसे कई ईवेंट श्रोताओं हैं जिन्हें मैं मक्खी पर गतिशील रूप से बनाना चाहता हूं लेकिन मुझे इन्हें पहले चाहिए ...

मुझे क्या याद आ रही है?

Answer 1

यह click समारोह कहा जाता है जब तक क्योंकि i मूल्यांकन नहीं किया जाता है, इस समय तक पाश चलना समाप्त कर दिया और i है यह अधिकतम (या बुरा कहीं और ओवरराइट कोड में) है पर है।

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

for(i = 1; i <= totalBanners; i++){ 
    $('#slider-' + i).click(function(event){  
     switchBanners($(this).attr('id').replace('slider-', ''), true); 
    }); 
} 

इस तरह आप तत्व है कि वास्तव में क्लिक किया गया की आईडी से नंबर हो रही है।

Answer 2

यह एक आम बात है जो लोगों का सामना करना पड़ता है।

जावास्क्रिप्ट में ब्लॉक स्कोप नहीं है, बस कार्यक्षेत्र का कार्य करें। तो आपके द्वारा लूप में बनाए गए प्रत्येक फ़ंक्शन को समान वैरिएबल वातावरण में बनाया जा रहा है, और इस तरह वे सभी i चर का संदर्भ दे रहे हैं।

दायरे करने के लिए एक नया वेरिएबल वातावरण में एक चर, आप एक समारोह में एक चर (या समारोह पैरामीटर) है कि मूल्य आप बनाए रखना चाहते संदर्भ आह्वान करने के लिए की जरूरत है।

नीचे दिए गए कोड में, हम इसे फ़ंक्शन पैरामीटर j के साथ संदर्भित करते हैं।

// Invoke generate_handler() during the loop. It will return a function that 
    //           has access to its vars/params. 
function generate_handler(j) { 
    return function(event) { 
     switchBanners(j, true); 
    }; 
} 
for(var i = 1; i <= totalBanners; i++){ 
    $('#slider-' + i).click(generate_handler(i)); 
} 

यहाँ हम generate_handler() समारोह, i में पारित लागू है, और generate_handler()वापसी एक समारोह स्थानीय चर संदर्भ था (समारोह में j नाम है, हालांकि आप इसे i रूप में अच्छी तरह नाम दे सकते हैं)।

लौटाए गए फ़ंक्शन का परिवर्तनीय वातावरण तब तक अस्तित्व में रहेगा जब तक कि फ़ंक्शन मौजूद न हो, इसलिए पर्यावरण के अस्तित्व में मौजूद किसी भी चर के संदर्भ में यह जारी रहेगा जब यह बनाया गया था।

---

अद्यतन: जोड़ा गया vari से पहले सुनिश्चित करें कि यह ठीक से घोषित किया जाता है किया जाना है।

Answer 3

ऐसा करने के बजाय .. emm .. लापरवाही, आपको एक ईवेंट श्रोता संलग्न करना चाहिए और हमें घटनाओं को पकड़ना चाहिए। इसे "घटना प्रतिनिधिमंडल" कहा जाता है।

कुछ लिंक:

• http://davidwalsh.name/event-delegate
• http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-javascript-event-delegation-in-4-minutes/
• http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/
• http://lab.distilldesign.com/event-delegation/

अध्ययन इस। जावास्क्रिप्ट में ईवेंट प्रबंधन के बारे में जानने के लिए यह एक महत्वपूर्ण बात है।

Answer 4

[संपादित करें: इस उत्तर को एक उत्थान प्राप्त हुआ और इसे पुराने वाक्यविन्यास का उपयोग करके मान्यता मिली। JQuery की "चालू" ईवेंट बाध्यकारी विधि का उपयोग करके, कुछ अद्यतन वाक्यविन्यास यहां दिए गए हैं। वही सिद्धांत लागू होता है। आप निकटतम गैर नष्ट माता-पिता के लिए बाध्य, निर्दिष्ट चयनकर्ता पर क्लिक सुनना]

$(function() { 
    $('.someAncestor').on('click', '.slider', function(e) { 
    // code to do stuff on clicking the slider. 'e' passed in is the event 
    }); 
}); 

नोट:।। यदि प्रारंभ की अपनी श्रृंखला को पहले से ही श्रोता सम्मिलित करने के लिए एक उपयुक्त स्थान है (यानी आप पहले से ही एक दस्तावेज है तैयार या अधिभार समारोह) आपको इस नमूना के $(function(){}) विधि में इसे लपेटने की आवश्यकता नहीं है। आप उस उचित स्थान पर $('.someAncestor')... भाग डाल देंगे।

मूल जवाब अधिक विस्तृत विवरण और विरासत नमूना कोड के लिए बनाए रखा:

---

मैं tereško साथ हूँ: सौंपने घटनाओं प्रत्येक "मांग पर" क्लिक करें क्योंकि यह थे कर से अधिक शक्तिशाली है। स्लाइडर तत्वों के पूरे समूह तक पहुंचने का सबसे आसान तरीका प्रत्येक साझा वर्ग देना है।

$(function() { 
    $('body').delegate('.slider', 'click', function() { 
     var sliderSplit = this.id.split('-'); // split the string at the hyphen 
     switchBanners(parseInt(sliderSplit[1]), true); // after the split, the number is found in index 1 
    }); 
}); 

लिडल फिडल:: चलो कहते हैं, "स्लाइडर" तो फिर तुम एक सार्वभौमिक घटना सभी को सौंप सकते हैं तत्वों ".slider" चलो http://jsfiddle.net/2KrEk/

मैं करने के लिए "शरीर" सिर्फ इसलिए मैं नहीं सौंपने कर रहा हूँ अपने एचटीएमएल संरचना को जानें। आदर्श रूप में आप उन सभी स्लाइडर्स के सबसे करीबी माता-पिता को सौंपेंगे जिन्हें आप जानते हैं कि अन्य डोम मैनिप्लेशंस द्वारा नष्ट नहीं किया जा रहा है। अक्सर ओमे प्रकार के रैपर या कंटेनर div।