How to prevent multiple binding to the same selector in Jquery? -

  $ ("। पोस्ट")। पर ("क्लिक करें", show_hide_posts); // कॉलबैक फ़ंक्शन तृतीय-पक्ष एजेक्स प्लगइन $ .fn.almComplete = function (alm) {$ ("। Post")। पर ("क्लिक करें", show_hide_posts); }  

जब दस्तावेज़। मैं बाध्य करने के लिए क्लिक करें। जब एजाक्स के माध्यम से अधिक सामग्री लोड हो जाती है तो मैं नई पोस्ट बाँध करने के लिए कॉलबैक फ़ंक्शन का उपयोग करता हूं। यह पुरानी पोस्ट ठीक से काम नहीं करता है।

show_hide_posts के पास एक साधारण हैक्लस है, यह जांचने के लिए कि क्या पोस्ट को दिखाई देने पर छिपाया जाना चाहिए या नहीं। नई पोस्ट लोड होने के बाद, यह है क्लास चेक पुराने पदों पर विफल रहता है, लेकिन फिर भी नई पोस्ट पर काम करता है।

  फ़ंक्शन show_hide_posts () {e.preventDefault (); अगर (! $ (यह) .hasClass ('बंद')) {// पोस्ट करें $ (इस) .addClass ("बंद"); } अन्य {// शो पोस्ट $ (यह) .removeClass ("बंद"); }}  

क्या मैं यह व्यवहार एक ही चयनकर्ता को एक से अधिक बार बाइंडिंग का परिणाम देता हूं? या क्या मैं कुछ और याद कर रहा हूं?

मैं यह व्यवहार उसी चयनकर्ता को बाइंड करने का एक परिणाम अधिक एक बार से अधिक?

हाँ, आप एक से अधिक बार बाध्य हैं।

मान लें कि आपके पास निम्न HTML है:

  & Lt; div वर्ग = "पोस्ट" & gt; & Lt; div class = "post" & gt; ए & lt; / post & gt; & Lt; div वर्ग = "पोस्ट" & gt; बी & lt; / post & gt; & Lt; / div & gt;  

आप कॉल करते हैं

  $ ("। पोस्ट")। पर ("क्लिक करें", show_hide_posts);  

अब अब ए और बी पर एक क्लिक हैंडलर है इसके बाद आप एजेक्स / html को अपडेट कर सकते हैं:

  & lt; div class = "posts" & gt; & Lt; div class = "post" & gt; ए & lt; / post & gt; & Lt; div वर्ग = "पोस्ट" & gt; बी & lt; / post & gt; & Lt; div वर्ग = "पोस्ट" & gt; सी & lt; / post & gt; & Lt; div वर्ग = "पोस्ट" & gt; डी & lt; / post & gt; & Lt; / div & gt;  

और कॉल करें:

  $ ("। पोस्ट")। पर ("क्लिक करें", show_hide_posts);  

अब ए और बी के पास दो हैंडलर हैं, जबकि C और D एक है।

जब दस्तावेज़। मैं बाध्य करने के लिए क्लिक करें। जब एजाक्स के माध्यम से अधिक सामग्री लोड हो जाती है तो मैं नई पोस्ट बाँध करने के लिए कॉलबैक फ़ंक्शन का उपयोग करता हूं। यह पुरानी पोस्ट ठीक से काम नहीं करता है।

सही है, इसलिए समाधान .post से सीधे नहीं है:

  $ ('। पोस्ट')। पर ('क्लिक करें', '.post', show_hide_posts);  

यह गतिशील रूप से जोड़े गए पदों के किसी भी संख्या के लिए काम करता है, और .posts के भीतर .posts के पास एक ही हैंडलर है, और कभी भी नहीं है

विविध नोट्स :

आपको सबसे ज्यादा ऐसा नहीं करना चाहिए:

  ई। चूक को रोकें();  

इससे बहुत सी समस्याएं हो सकती हैं।

आप भी प्रतिस्थापित कर सकते हैं:

  यदि (! $ (यह) हैक्लास ('बंद')) {$ (यह) .addClass ("बंद"); } और {$ (यह) .removeClass ("बंद"); }  

के साथ:

  $ (यह) .toggleClass ("बंद");