jQuery स्वचालित रूप से ईवेंट हैंडलर को अमेक्स प्रतिक्रिया

Question

द्वारा डीओएम में जोड़े गए तत्वों पर उपयोगकर्ता क्रियाओं को स्वचालित रूप से पंजीकृत करता है AJAX वेब एप्लिकेशन के लिए जिसमें कई स्क्रीन और नेविगेशन होते हैं, div या लिंक या बटन के लिए ईवेंट हैंडलर संलग्न करने के लिए, हम कोड जैसे कोड कर सकते हैं :

//Using $.on inside Ajax success handler 

$("#container").on("click", "#selector", function(event){ 

}); 

• यह दृष्टिकोण काम नहीं करेंगे कंटेनर डोम में नहीं मौजूद है है। यह काम करने के लिए, कंटेनर के रूप में दस्तावेज़ या शरीर का उपयोग करना होगा, प्रदर्शन अच्छा नहीं हो सकता।

• अजाक्स सफलता हैंडलर में कोड की कई पंक्तियां हो सकती हैं। बेहतर ढंग से व्यवस्थित करने के लिए, एक समारोह के लिए कोड के लिए कदम और अजाक्स सफलता हैंडलर में है कि समारोह कॉल कर सकते हैं। लेकिन हमें सभी क्रमिकताओं और संयोजनों के लिए कई पंजीकरण कार्यक्रम कार्य करना होगा।

• फ़ंक्शन कोड क्लटरिंग पंजीकृत करें।

• यदि ईवेंट हैंडलर पहले ही पंजीकृत हो चुका है, तो फिर से पंजीकरण करने से दो हैंडलर भी होंगे। से रजिस्टर संयुक्त राष्ट्र तो हम करने के लिए है और रजिस्टर (या केवल देते हैं, तो पहले से ही जुड़ी नहीं) - प्रदर्शन समस्या के बारे में सुनिश्चित नहीं हैं।

किसी भी विकल्प?

मैं निम्नलिखित की सोच रहा हूँ:

• कंटेनर, लक्ष्य का एक नक्शा बनाए रखें, और एक मॉड्यूल के लिए एक ही स्थान पर ईवेंट हैंडलर क्लिक करें।

• AJAX पूर्ण वैश्विक ईवेंट हैंडलर में, यदि xhr.responseHTML में कंटेनर है, तो तत्वों को लक्षित करने के लिए ईवेंट हैंडलर संलग्न करें (केवल संलग्न होने पर ही संलग्न करें)।

  $(document).ajaxComplete(function(e, xhr, settings){ 
      for(ind in clickEventListeners){eventlistner = clickEventListeners[ind]; 
      if($(eventlistner.container,xhr.responseHTML).length > 0){ 
       $(eventlistner.target).on("click",function(){ 
       eventlistner.processor(this); 
       }); 
      } 
  } 
  }); 
  

पेशेवरों: एक मॉड्यूल के लिए एक ही स्थान पर प्रलेखित सभी ईवेंट हैंडलर्स। प्रत्येक AJAX सफलता हैंडलर के लिए कोई कोड cluttering।

विपक्ष: मुझे यकीन नहीं है कि कोई है या नहीं।

कृपया कोई सुझाव दें या नहीं।

Answer 1

अपडेट किया गया

एक तत्व है कि गतिशील रूप से जोड़ दिया जाएगा संस्करण 1.9+ की के रूप में दस्तावेज़, नहीं तत्व पर श्रोता रखने की आवश्यकता है के लिए एक घटना बाइंडिंग। Jquerys api से आप यह लाइन पा सकते हैं:

"इवेंट हैंडलर केवल वर्तमान में चयनित तत्वों के लिए बाध्य हैं; जब भी आपका कोड कॉल करता है तो वे पृष्ठ पर मौजूद होना चाहिए।()।"

दस्तावेज़ को ईवेंट बाध्य करने और चयनकर्ता को बाद में रखने के लिए इस श्रोता को वास्तव में पहचाने जाने की अनुमति होगी।

$(document).delegate("#selector", "click", 

या

$(document).on("click", "#selector", 

उदाहरण: http://jsfiddle.net/2HA7d/

पिछले jQuery में रिलीज को लाइव() फंक्शन इस्तेमाल किया जा सकता है जो वास्तव में इस वास्तव में आप के रूप में कार्य करने की अनुमति दस्तावेज़ में श्रोता रखा सोचेंगे:

$("#selector").live("click", 

उदाहरण: http://jsfiddle.net/q3jYB/

दूसरा उदाहरण पहले उदाहरण के समान कार्य करता है।

चूंकि तत्व अभी तक मौजूद नहीं है, इसलिए जावास्क्रिप्ट उस तत्व के लिए ईवेंट श्रोता जोड़ने में असमर्थ है जिसे आप ढूंढ रहे हैं। इसलिए, गतिशील रूप से जोड़े गए तत्वों के लिए श्रोता जोड़ने की कोशिश करते समय और आप एक नया jquery संस्करण (1.9+) का उपयोग कर रहे हैं और() या प्रतिनिधि() पर उपयोग कर रहे हैं, तो अपने ईवेंट श्रोता को दस्तावेज़ में जोड़ें जैसा कि पहले दिए गए फ़िल्ड में देखा गया है।

संपादित करें:

के रूप में मैं टिप्पणी में कहा गया हूँ होगा, कंटेनर के लिए घटना श्रोता जोड़ने यदि संभव हो तो भी एक बहुत व्यवहार्य विकल्प है और प्रदर्शन में सुधार कर सकते हैं

सूत्रों का कहना है:

https://api.jquery.com/on/

http://jquery.com/upgrade-guide/1.9/

How does jQuery .live() work?

उम्मीद है कि इससे मदद मिलती है।

Answer 2

एक घटना हैंडलर को document या body पर बाइंडिंग करना अच्छा विचार नहीं हो सकता है यदि यह पहले से ही डोम में मौजूद है।

लेकिन अगर तत्वों (आपके मामले में) की तरह गतिशील रूप से उत्पन्न कर रहे हैं, तो आप तो कंटेनर, लक्ष्य की अपनी खुद की ढेर को बनाए रखने के दस्तावेज़ के लिए एक घटना के लिए बाध्य हो सकता है, और ईवेंट हैंडलर क्लिक करें, जैसे:

$(document).on("click", "#selector", function() {}) 

स्रोत : Are there any drawbacks to listen events on document level in jQuery?

Answer 3

मैं आपके जैसी ही स्थिति में था, इसे आजमाएं, यह मेरे अंत में बहुत अच्छा काम करता है!

• मास्टर फ़ाइल में पहले मैं इस तरह ईवेंट हैंडलर बाँध:

  $('body').bind('gridloaded', function(e,f) { my logic });

• ajax फाइलों में गतिशील रूप से अंत में मेरी डोम पेड़ को आबाद करने कर रहे हैं मैं ट्रिगर जहां जरूरत है और तत्व आईडी मैं जोड़ने 'पर हूँ, इस तरह:

  $('body').trigger('gridloaded', $(this).attr('id'));

  onClickButton: function(){ $("body").trigger("gridloaded", $(this).attr('id')) }

मैं इस दृष्टिकोण से प्यार करता हूं क्योंकि यह साफ है: इससे कोई फर्क नहीं पड़ता कि AJAX कॉल कितनी देर तक लेता है, यह हमेशा सही समय पर केवल एक ईवेंट को ट्रिगर करेगा।