jQuery $ ("वर्ग")। क्लिक करें (); - कई तत्व, एक बार घटना पर क्लिक करें

Question

मेरे पास एक ही नाम के एक पृष्ठ पर कई कक्षाएं हैं। फिर मेरे जेएस में एक .click () ईवेंट है। मैं जो कुछ भी करना चाहता हूं वह केवल एक बार होने वाली क्लिक घटना है, चाहे मेरे पृष्ठ पर कई कक्षाएं हों।

परिदृश्य यह है कि मैं गाड़ी में जोड़ने के लिए AJAX का उपयोग कर रहा हूं। कभी-कभी मुख पृष्ठ पर एक विशेष रुप से प्रदर्शित उत्पाद और एक शीर्ष प्रस्ताव हो सकता है जिसका अर्थ है कि एक ही वर्ग .add। # Productid # है और जब Add to Cart पर क्लिक किया जाता है तो दो बार निकाल दिया जाता है।

मैंने 'क्लिक क्षेत्र' बनाने के बारे में सोचा था, इसलिए मेरे पास .container-name .add। # Pid # होगा ताकि अद्वितीय क्लिक दिए जा सकें।

क्या यह एकमात्र उपाय है?

<div class="addproduct 151">product info</div>
<div class="addproduct 151">product info</div>
<div class="addproduct 151">product info</div>
<div class="addproduct 151">product info</div>
<div class="addproduct 151">product info</div>


$(".addproduct").click(function(){//do something fired 5 times});

Comments

कृपया अपना कोड पोस्ट करें, आप जो कह रहे हैं उससे मुझे कोई मतलब नहीं है।

— लाजर

हां, कृपया अपनी जावास्क्रिप्ट के लिए कोड पोस्ट करें।

— यंगवे बी-निल्सन

यह केवल एक बार आग लगना चाहिए, या तो आपके HTML के साथ एक समस्या है - शायद एक एडप्रोडक्ट क्लास दूसरे में नेस्टेड है, या हैंडलर में कोई त्रुटि है जो एक क्लिक के लिए दो बार अजाक्स को फायर करती है, या तो इस तरह से हमें और अधिक पूरा करना होगा कोड सुनिश्चित करने के लिए।

— साइमन

भयानक सवाल और जवाब। मैं एक समान समस्या का सामना कर रहा हूं, लेकिन कोई भी शुरुआती पोस्टर पागलपन के लिए एक संकल्प या विधि का उल्लेख नहीं करता है ... इसलिए यह हतोत्साहित करता है कि लोग इस साइट का ठीक से उपयोग नहीं कर सकते हैं, लेकिन किसी भी स्तर पर डेवलपर होने की उम्मीद करते हैं।

— ocergynohtna

डेटा-आईडी = "151" और उसके बाद $ (यह) .डेटा ('आईडी') का उपयोग करें

— एंड्रेस एसके

Answer 1

इस पुराने धागे को उछालने के लिए माफी। मुझे अभी भी यही समस्या थी, और मैं अपना समाधान साझा करना चाहता था।

$(".yourButtonClass").on('click', function(event){
    event.stopPropagation();
    event.stopImmediatePropagation();
    //(... rest of your JS code)
});

event.StopPropagationऔर event.StopImmediatePropagation()चाल चलनी चाहिए।

इवेंट हैंडलर के लिए -class चयनकर्ता होने के परिणामस्वरूप bubblingक्लिक इवेंट (कभी-कभी मूल तत्व, कभी-कभी DOM में चिल्ड्रन एलिमेंट्स) का परिणाम होगा।

event.StopPropagation()विधि यह सुनिश्चित करती है कि घटना अभिभावक तत्वों के लिए बुलबुला नहीं है, जबकि event.StopImmediatePropagation()विधि यह सुनिश्चित करती है कि घटना वांछित वर्ग चयनकर्ता के बच्चों के तत्वों के लिए बुलबुला नहीं है।

स्रोत: https://api.jquery.com/event.stoppropagation/ https://api.jquery.com/event.stopimmediatepropagation/

Comments

यह सही उपाय है। यदि आप jQuery के साथ एक वर्ग पर क्लिक कहते हैं तो यह अन्य तत्वों को बुलबुला कर सकता है और कई क्लिक को पंजीकृत कर सकता है। उस क्लिक इवेंट के प्रचार को अन्य तत्वों पर रोकना है कि इसे कैसे हल किया जाए। मुझे लगता है कि कुछ अन्य जवाबों में गलतफहमी हुई है कि यहाँ क्या होने की संभावना थी।

— RATKNUKKL

Answer 2

$(document).on('click', '.addproduct', function () {
    // your function here
});

Comments

क्या यह काम करता है? फंक्शन पर कभी इस तरह से इस्तेमाल होते नहीं देखा गया

— नबील खान

मुझे किसी अन्य घटना से दिए गए उत्तर को कैसे कॉल करना चाहिए ??

— मुराद हसन

सब कुछ करने की कोशिश की, यह एकमात्र समाधान है जिसने काम किया।

— मैट

दूसरे पैरामीटर की व्याख्या:A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

— zwlxt

Answer 3

क्या हम आपका क्लिक हैंडलर देख सकते हैं? आप 5 श्रोताओं को 5 विभिन्न तत्वों से जोड़ रहे हैं। हालांकि, जब उपयोगकर्ता तत्व पर क्लिक करता है, तो केवल एक घटना निकाल दी जाती है।

$(".addproduct").click(function(){
  // Holds the product ID of the clicked element
  var productId = $(this).attr('class').replace('addproduct ', '');

  addToCart(productId);
});

यदि यह समाधान काम नहीं करता है तो मैं आपके क्लिक हैंडलर को देखना चाहता हूं।

Answer 4

जब आप addproduct वर्ग के साथ div पर क्लिक करते हैं तो एक घटना उस विशेष तत्व के लिए निकाल दी जाती है, पाँच नहीं। अगर घटना को 5 बार निकाल दिया जाए तो आप कुछ गलत कर रहे हैं।

Comments

मुझे यह पसंद है कि यह उत्तर कैसे स्पष्ट होता है और फिर यह कहती है कि वे अपने कोड की जांच करने जा रहे हैं जैसे कि यह ऐसा कुछ नहीं था जो वे पहले स्थान पर करने जा रहे थे: डी।

— KI4JGT

मुझे आश्चर्य है कि यह स्वीकृत उत्तर है। जैसा कि इवान कलाफ़ातिक द्वारा उल्लेख किया गया है, मुद्दा यह है कि क्लिक इवेंट को अन्य तत्वों के लिए प्रचारित किया जा रहा है। इसका समाधान इस प्रचार को रोकना है। कृपया यह देखने के लिए कि इवान कलाफतिओव का उत्तर क्या है। संपादित करें: केवल सही उत्तर पर ध्यान दिया गया था कि वास्तव में इवान कलाफतिओक द्वारा लिखा गया था, न कि मैकाविटी (जिन्होंने इसे संपादित किया था)। मेरी गलती तय की।

— RATKNUKKL

Answer 5

इस स्थिति में मैं कोशिश करूँगा:

$(document).on('click','.addproduct', function(){

    //your code here

 });

फिर, यदि आपको एक ही ओट पर एक ही वर्ग के साथ अन्य तत्वों में कुछ करने की आवश्यकता है, तो आप उन तत्वों के माध्यम से लूप कर सकते हैं:

$(document).on('click','.addproduct', function(){
   $('.addproduct').each( function(){

      //your code here
     }
  );
 }
);

Answer 6

मुझे लगता है कि आप क्लिक इवेंट को पांच बार जोड़ते हैं। यह गिनने की कोशिश करें कि आप ऐसा कितनी बार करते हैं।

console.log('add click event')
$(".addproduct").click(function(){ });

Comments

AngularJS का उपयोग करते हुए, मैंने देखा है कि यह x राशि के परीक्षण के लिए स्क्रिप्ट टैग की नकल करता है! संभव समाधान के लिए धन्यवाद।

— डीन मेहान

Answer 7

यह इसे ठीक करना चाहिए और एक अच्छी आदत होनी चाहिए: .unbind ()

$(".addproduct").unbind().click(function(){
   //do something 
});

Comments

कृपया ध्यान दें कि unbind हटा दिया गया है ( api.jquery.com/unbind से ): jQuery 3.0 के रूप में, .unbind () को हटा दिया गया है। इसे jQuery 1.7 के बाद से .off () विधि द्वारा अधिगृहीत किया गया था, इसलिए इसका उपयोग पहले से ही हतोत्साहित किया गया था।

— तोमर

Answer 8

मैंने इनलाइन jquery फ़ंक्शन कॉल जैसे का उपयोग करके इसे हल किया

<input type="text" name="testfield" onClick="return testFunction(this)" /> 

<script>
  function testFunction(current){
     // your code go here
  }
</script>

Comments

तुम मेरे दिन को बचाओ यार!

— Sma .ne

Answer 9

मुझे बस यही समस्या थी। मेरे मामले में PHP कोड एक ही jQuery कोड से कुछ ही बार उत्पन्न हुआ और वह कई ट्रिगर था।

<a href="#popraw" class="report" rel="884(PHP MULTIPLE GENERATER NUMBERS)">Popraw / Zgłoś</a>

(PHP MULTIPLE GENERATER NUMBERS ने एक ही कोड को कई बार बनाया)

<script type="text/javascript">
$('.report').click(function(){...});
</script>

मेरा समाधान एक और php फ़ाइल में स्क्रिप्ट को अलग करना और उस फ़ाइल को एक बार लोड करना था।

Comments

आपकी टिप्पणी ने मुझे मेरे समाधान के लिए प्रेरित किया - मेरे पास एक ही मुद्दा था, हर तत्व के लिए एक क्लिक ने एक घटना को निकाल दिया। ऐसा इसलिए था क्योंकि मैंने स्क्रिप्ट को एक आंशिक दृश्य (एस्प mvc) में अटका दिया था जो कई बार भरी हुई थी। धन्यवाद।

— Hanshan

Answer 10

बस यहाँ कोड दर्ज करें। JQuery में, लोगों की घटना को ट्रिगर किया जाता है, आप फ़ाइल में कक्षाओं की घटनाओं की संख्या की जांच करें और अगले तर्क के लिए लूप का उपयोग करें। JQuery के माध्यम से किसी भी वर्ग, टैग या किसी भी DOM तत्व की घटनाओं की संख्या की पहचान करने के लिए: var len = $ ("addductduct")। लंबाई;

 $(".addproduct").click(function(){
       var len = $(".addproduct").length; 
       for(var i=0;i<len;i++){
          ...
        }
 });

Answer 11

मुझे भी यही समस्या थी। कारण यह था कि मेरे पास कई बार एक ही jquery थी। उसे एक पाश में रखा गया था।

$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});
$ (". AddProduct"). click (function () {});

इस कारण कई बार गोलीबारी हो रही थी

Answer 12

मैंने इसे अपने प्रोजेक्ट में खुद आजमाया।

एक तालिका में मेरी सभी पंक्तियों में एक वर्ग "संपर्क" है:

मेरा कोड इस तरह दिखता है:

var contactManager = {};

contactManager.showEditTools = function(row) {
  console.debug(row);
}

$('.contact').click(function(event){
  console.log("this should appear just once!");
  alert("I hope this will appear just once!");
  contactManager.showEditTools(event);
});

और जब मुझे कोड निष्पादित किया गया था, तब मैं अपनी पूरी पंक्तियों को फायरबग कंसोल में देख कर डर गया था:

लेकिन फिर मुझे एहसास हुआ कि क्लिक इवेंट को निकाल नहीं दिया गया था, क्योंकि कोई भी अलर्ट-डायलॉग दिखाई नहीं दिया था। फायरबग आपको केवल उन तत्वों को दिखाता है जो क्लिक ओवरईडिंग से प्रभावित होते हैं। इसलिए चिंता की कोई बात नहीं है।

Answer 13

.off()हैंडलर का उपयोग करने का प्रयास करें :

$(function () {
    $(".archive-link").click(function (e) {
        var linkObj = $(this);
        var cb = $("#confirm-modal");
        cb.find(".modal-body").append("<p>Warning message.</p>");
        cb.modal('show'); 
        cb.find(".confirm-yes").click(function () {
            $(this).off(); //detach this event
            //ajax call yada yada..
        }

मैं clickक्लास के साथ ऑब्जेक्ट की घटना पर कार्य करने के लिए ओके मोडल बटन पर एक क्लिक ईवेंट हैंडलर संलग्न करता हूं .archive-link।

पहले क्लिक पर, ईवेंट केवल उस .archive-linkऑब्जेक्ट पर फायर करता है जो मैंने फ़ंक्शन को ( var linkObj) पर कार्य करने के लिए कहा था । लेकिन जब मैं दूसरी बार उसी लिंक पर क्लिक करता हूं और मोडल पर ओके मारता हूं, तो ईवेंट हर उस ऑब्जेक्ट पर फायर करता है, .archive-linkजिसे मैंने पहले क्लिक किया था।

मैंने ऊपर दिए गए समाधानों का उपयोग किया लेकिन दुर्भाग्य से काम नहीं किया। यह तब था जब मुझे .ऑफ़ () मोडल ओके बटन क्लिक फंक्शन के भीतर प्रचार बंद हो गया। आशा है कि ये आपकी मदद करेगा।

Answer 14

इस प्रश्न को हल कर दिया गया है और बहुत सी प्रतिक्रियाएं भी मिली हैं, लेकिन मैं इसमें कुछ जोड़ना चाहता हूं। मैं यह जानने की कोशिश कर रहा था कि मेरे क्लिक ने 77 बार फायरिंग क्यों की, और एक बार नहीं।

मेरे कोड में, मेरे पास प्रत्येक था, एक json प्रतिक्रिया चला रहा था और इसे बटन के साथ divs के रूप में प्रदर्शित कर रहा था। और फिर मैंने प्रत्येक के अंदर क्लिक इवेंट घोषित किया।

$(data).each(function(){
    button = $('<button>');
    button.addClass('test-button');
    button.appendTo("body");

    $('.test-button').click(function(){
        console.log('i was clicked');
    })
})

यदि आप अपना कोड इस तरह लिखते हैं, तो क्लास .test- बटन को कई क्लिक इवेंट मिलेंगे। उदाहरण के लिए, मेरे डेटा में 77 लाइनें हैं, इसलिए प्रत्येक 77 बार चलेगा, इसका मतलब है कि मैं 77 बार कक्षा में क्लिक इवेंट को अस्वीकार कर दूंगा। जब आप तत्व पर क्लिक करते हैं, तो उसे 77 बार निकाल दिया जाएगा।

लेकिन अगर आप इसे इस तरह से मिटाते हैं:

$(data).each(function(){
    button = $('<button>');
    button.addClass('test-button');
    button.appendTo("body");
})

    $('.test-button').click(function(){
        console.log('i was clicked');
    })

आप प्रत्येक के बाद क्लिक तत्व घोषित कर रहे हैं। इसका मतलब है, प्रत्येक अपना 77 बार चलेगा, और क्लिक तत्व केवल एक बार घोषित किया जाएगा। इसलिए, यदि आप तत्व पर क्लिक करते हैं, तो इसे केवल एक बार निकाल दिया जाएगा।

Answer 15

बस नीचे दिए गए कोड में यह पूरी तरह से ठीक काम कर रहा है

$(".addproduct").on('click', function(event){
    event.stopPropagation();
    event.stopImmediatePropagation();
    getRecord();
});


function getRecord(){
   $(".addproduct").each(function () {
       console.log("test");
       });

}

Answer 16

हाय इस पोस्ट के लिए खेद है बस इस समस्या का सामना करना पड़ रहा है और मैं अपना मामला दिखाना चाहूंगा।

मेरा कोड इस तरह दिखता है।

<button onClick="product.delete('1')" class="btn btn-danger">Delete</button>
<button onClick="product.delete('2')" class="btn btn-danger">Delete</button>
<button onClick="product.delete('3')" class="btn btn-danger">Delete</button>
<button onClick="product.delete('4')" class="btn btn-danger">Delete</button>

जावास्क्रिप्ट कोड

<script>
 var product = {
     //  Define your function
     'add':(product_id)=>{
          //  Do some thing here
     },

     'delete':(product_id)=>{
         //  Do some thig here
     }
 }
</script>

Answer 17

$(document).ready(function(){

    $(".addproduct").each(function(){
          $(this).unbind().click(function(){
               console.log('div is clicked, my content => ' + $(this).html());
           });
     });
}); 
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="addproduct 151">product info 1</div>
<div class="addproduct 151">product info 2</div>
<div class="addproduct 151">product info 3</div>
<div class="addproduct 151">product info 4</div>
<div class="addproduct 151">product info 5</div>

Answer 18

आपके ईवेंट को केवल एक बार ट्रिगर किया गया है ... इसलिए यह कोड इस पर काम कर सकता है

    $(".addproduct,.addproduct,.addproduct,.addproduct,.addproduct").click(function(){//do     something fired 5 times});