javascript - How do I add events to array elements? -

मेरा कोड

  var बक्से = document.getElementsByClassName ("box"); के लिए (var i = 0; i & lt; बॉक्स। लम्बाई; i ++) {बक्से [i] .addEventListener ("dblclick", फ़ंक्शन (e) {this.classList.add ("animateSize"); this.style.width = " 2px "; this.style.height =" 2px "; window.setTimeout (2000);}); }   
 शुरू में मेरे पास केवल एक बॉक्स है, फिर मैं और अधिक बक्से बनाता हूं, लेकिन जब मैं किसी नए बने बक्से में कोई भी दोबारा क्लिक नहीं करता होता है, तब ही जब मैं प्रारंभिक बॉक्स को डबल क्लिक करता हूं, तो ईवेंट ट्रिगर होता है ।  
 मैं क्या कर रहा हूँ गलत?  
 पी एस जब मैंने सृजित किया (बक्से की लम्बाई), उसके बाद मैंने 4 बक्से कहने लगा, मुझे सही लंबाई सतर्क (5 = 4 + 1 प्रारंभिक बॉक्स) मिलता है।   
 
 
 समस्या यह है कि आपका कोड केवल उन मैचों के लिए ईवेंट हैंडलर्स को जोड़ता है जो वर्तमान में DOM में लोड किए गए हैं यदि यह डीओएम लोड पर है, तो कोई 'भविष्य' तत्वों पर इवेंट जुड़ा नहीं होगा।  
 आप एक स्थिर कंटेनर (मैं दस्तावेज़ के लिए गए हैं) पर एक डबल क्लिक करने के लिए सुन सकता है और देखने के लिए एक चेक बना सकता है क्या लक्ष्यित तत्व वर्ग  बॉक्स  था। यदि ऐसा है, तो अपना कोड जारी करें:  
  document.addEventListener ("dblclick", फ़ंक्शन (e) {if (e.target.classList.contains ('box')) {var box = E.target; box.classList.add ("animateSize"); box.style.width = "2px"; box.style.height = "2px"; विंडो.सेटटाइमआउट (2000);}});   
 इवेंट डिलीएशन के रूप में भी जाना जाता है।  
 ध्यान दें कि आप अपने बॉक्स के निकटतम स्थिर कंटेनर के लिए  दस्तावेज़  को बदलना चाहते हैं।  
 अन्य तरीकों से, जैसे कि आपके ईवेंट संचालकों को हर बार जब आप अपने नोड्स को DOM में जोड़ते हैं, जैसे संलग्न करना है।