javascript बटन ऑनक्लिक फ़ंक्शन दो बार फ़ायरिंग




event-handling htmlbutton (5)

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

यह मेरा बटन है (मैं कोड उत्पन्न करने के लिए एक php ऑब्जेक्ट का उपयोग कर रहा हूं, इसलिए बहुत खाली टैग हैं):

<button name="addToCart" value="" size="" onclick="" src="" class="addToCartButton" id="0011110421111" type="button" formtarget="_self" formmethod="post" formaction="" data-mini="true" width="" height="" placeholder="" data-mini="1" onkeypress="" >Add To Cart</button>

यहां मेरा ईवेंट हैंडलर है:

$('.addToCartButton').click(function() {
    alert("bob");
    //addToCart($(this).attr("id"));
});

यहां, मुझे दो बार चेतावनी मिल रही है

मैंने फ़ंक्शन addToCart को बटन की ऑनक्लिक प्रॉपर्टी में कॉल करने की कोशिश की है, लेकिन अगर मैं इस तरह से कोशिश करता हूं, तो मुझे यह त्रुटि मिलती है:

TypeError: '[object HTMLButtonElement]' is not a function (evaluating 'addToCart(0011110421111)')

मैंने भी event.preventDefault () और event.stopPropagation () की कोशिश की है, और न ही काम किया है।

कोई भी विचार क्यों हो रहा है, या दो बार निष्पादित करने से इसे रोकने के लिए मैं क्या कर सकता हूं, या शायद अगर मैं जावास्क्रिप्ट फ़ंक्शन को onclick = "" पर कॉल करता हूं तो मुझे क्यों त्रुटि मिल रही है?


बस किसी और की समस्या होने के मामले में, मेरे पास एक ही समस्या थी, मूल कारण यह था कि एक ही आईडी के साथ 3 बटन थे, एक क्लिक करने के बाद, अन्य दो ने भी अपने OnClick ईवेंट निकाल दिए ...


मेरी घटना दो बार फायरिंग थी क्योंकि मैंने गलती से my_scripts.js और my_scripts.min.js को शामिल किया था। सुनिश्चित करें कि आप केवल एक ही शामिल करें


हो सकता है कि आप एक ही बटन पर दो बार घटना को संलग्न कर रहे हों। आप क्या कर सकते हैं, इस तरह से पहले से सेट किए गए किसी भी क्लिक ईवेंट को अनबाइंड करें:

$('.addToCartButton').unbind('click').click(function() {
    alert("bob");
    //addToCart($(this).attr("id"));
});

यह सभी संलग्न घटनाओं (माउसओवर, माउसउट, क्लिक, ...) के लिए काम करता है


चयनकर्ता से घटना बन्द करें और डीओएम में तत्वों में शामिल होने के बाद, विशिष्ट चयनकर्ता पर फिर से ट्रिगर करें। $ ("Selector_name")। Unbind ("event"); // चयनकर्ता पर फिर से इस कॉल की घटना के बाद ..

उदाहरण के लिए:

$( "#button" ).unbind( "click" );

$("#button").click(function(event) {
console.log("button click again);
});

मेरे लिए, मुझे पता चला कि मेरे कार्यक्रम मेरे मैप किए गए घटक के लिए बाध्य नहीं थे। प्रासंगिक जवाब है कि क्यों मेरे onClick को रेंडर करने पर बुलाया जाता है? - React.js लेकिन कुछ अंतर्दृष्टि प्रदान करने के लिए मैंने नीचे दिए गए कुछ उत्तरों की प्रतिलिपि बनाई है (उम्मीद है यह मदद करता है!):

1.bind.bind का उपयोग कर

activatePlaylist.bind(this, playlist.playlist_id)

2. तीर फ़ंक्शन का उपयोग करना

onClick={ () => this.activatePlaylist(playlist.playlist_id) }

3. सक्रिय करें प्लेलिस्ट से या वापसी समारोह

activatePlaylist(playlistId) {
  return function () {
     // you code 
  }
}




htmlbutton