Jquery (।) का उपयोग करके व्यक्तिगत ईवेंट श्रोताओं को कैसे जोड़ा जाए?

Jan 08 2021

मेरे पास एक सरल सेटअप है: विभिन्न मूल्यों के साथ दो बटन। मैं प्रत्येक बटन पर क्लिक इवेंट श्रोता को जोड़ने के लिए jquery से .each () फ़ंक्शन का उपयोग करना चाहता हूं जो प्रत्येक बटन के मानों को लॉग करता है। लेकिन किसी तरह से .each () का उपयोग करते समय, jquery पिछले बटन (ओं) के लिए क्लिक हैंडलर को ओवरराइट कर देता है। यह मुझे दो सवालों के साथ छोड़ देता है:

ऐसा क्यों है?
Jquery वस्तुओं के संग्रह में व्यक्तिगत ईवेंट श्रोताओं को कैसे जोड़ते हैं?

नीचे कोड देखें

  <html lang="en">
    
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
            $(() => { $(`button[toggle]`).each((_, button) => {
                    let $toggle = $(button);
                    type = $toggle.attr("type"); value = $toggle.attr("value");
                    $toggle.on("click", () => {
                        console.log(type, value);
                    });
                });
            });
        </script>
    
    </head>
    
    <body>
        <div>
            <button toggle type="one" value="true">One</button>
            <button toggle type="two" value="false">Two</button>
        </div>
    </body>
    
    </html>

जवाब

1 RoryMcCrossan Jan 08 2021 at 20:14

आपके कोड में समस्या इसलिए है क्योंकि आपने अनुमानित रूप से चर typeऔर valueचर घोषित किए हैं , इसलिए वे windowदायरे में हैं। जैसे कि प्रत्येक निम्नलिखित पुनरावृत्ति मूल्यों को अधिलेखित कर देता है ताकि लूप समाप्त होने के बाद केवल अंतिम मान दिखाई दे।

इसे ठीक करने के लिए , लूप के भीतर चर को परिभाषित करें :

$(() => { $(`button[toggle]`).each((_, button) => {
    let $toggle = $(button);
    let type = $toggle.attr("type"); let value = $toggle.attr("value");
    $toggle.on("click", () => {
      console.log(type, value);
    });
  });
});

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div>
  <button toggle type="one" value="true">One</button>
  <button toggle type="two" value="false">Two</button>
</div>

हालांकि , आपकोeach()लूपकी बिल्कुल आवश्यकता नहीं है। आप समस्या को ठीक कर सकते हैं और सभीbuttonतत्वों केलिए एक ही ईवेंट हैंडलर को बाइंडकरके औरtargetउनके गुणों को एक्सेस करने के लिए उठाए गए ईवेंटकीसंपत्ति काउपयोग करकेकोड की गुणवत्ता में सुधारकर सकते हैं।

इसके अलावा, ध्यान दें कि toggleइस मामले में, अपने स्वयं के गैर-मानक विशेषताओं को जोड़ने से, UI और JS में समस्याएं हो सकती हैं। तत्वों के समूह के लिए एक वर्ग का उपयोग करने के लिए एक बेहतर तरीका है।

अंत में, oneऔर विशेषता के twoलिए मान्य मान नहीं हैं type। dataअपने स्वयं के कस्टम मेटाडेटा को किसी तत्व से जोड़ने के बजाय एक विशेषता का उपयोग करें ।

कहा कि सभी के साथ, यह प्रयास करें:

jQuery($ => {
  $('.toggle').on('click', e => { let $toggle = $(e.target); let type = $toggle.data("type"); 
    let value = $toggle.prop("value");
    console.log(type, value);
  });
});

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div>
  <button class="toggle" data-type="one" value="true">One</button>
  <button class="toggle" data-type="two" value="false">Two</button>
</div>

1 prasanth Jan 08 2021 at 20:10

$(this)क्लिक कॉलबैक के अंदर उपयोग करें

$(() => {
  $(`button[toggle]`).each((_, button) => { $(button).on("click", function(){
       type   = $(this).attr("type"); value = $(this).attr("value");
      console.log(type, value);
    });
  });
});

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<button toggle type="one" value="true">One</button>
<button toggle type="two" value="false">Two</button>

और प्रत्येक कॉलबैक के अंदर उल्लेख करने की भी आवश्यकता नहीं है। आप नीचे की तरह सामान्य तरीके से कॉल कर सकते हैं