मेरे पास HTML पृष्ठ है जिसमें div तत्वों की संरचना नीचे है।

<div data-videos-list="listelement" id="band-comments-div">
<label>
    <!-- Some code here-->
    <br><a class="band-comments" href="review.html?bandName=Local Band">Click to review</a>
</label>

यहां, div और एक टैग कई बार दोहराए जाते हैं। प्रत्येक एंकर टैग के बीच एकमात्र अंतर यह है कि href विशेषता प्रत्येक के लिए अलग है। मैं नीचे दिए गए टैग की हर घटना की क्लिक घटना को संभालने की कोशिश कर रहा हूं।

$("#band-comments-div a").on("click", function(event) {
event.preventDefault();

}});

लेकिन चूंकि डिव और टैग की कई घटनाएं होती हैं, इसलिए क्लिक इवेंट को ट्रैक नहीं किया जाता है। क्या इसे संभालने का कोई और तरीका है?

2
Swapnil 2 अप्रैल 2018, 09:44

4 जवाब

गैर-अद्वितीय आईडी अमान्य HTML हैं, इसलिए आपको इसके बजाय एक वर्ग बनाना चाहिए:

$(".band-comments-div a").on("click", function(event) {
  event.preventDefault();
  console.log(this.outerHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-videos-list="listelement" class="band-comments-div">
  <label>
    <!-- Some code here-->
    <br><a class="band-comments" href="review.html?bandName=Local Band">Click to review</a>
</label>
1
Sebastian Speitel 2 अप्रैल 2018, 06:49

लेकिन चूंकि डिव और टैग की कई घटनाएं होती हैं, इसलिए क्लिक इवेंट को ट्रैक नहीं किया जाता है।

डुप्लिकेट आईडी होने से समस्याएं होती हैं - यह उनमें से एक है।

क्या इसे संभालने का कोई और तरीका है?

आप id विशेषता को हटा सकते हैं (चूंकि मैं यह नहीं देखता कि यह कैसे उपयोगी है क्योंकि आप इसे चयनकर्ता में उपयोग नहीं कर सकते हैं)। चयनकर्ता में data-videos-list विशेषता का उपयोग करें

$("div[data-videos-list] a").on("click", function(event) {
   event.preventDefault();
   //rest of the logic
}});

यदि डिव में कई एंकर होने जा रहे हैं, तो चयनकर्ता में भी एंकर की कक्षा का उपयोग करें

$("div[data-videos-list] a.band-comments").on("click", function(event) {
   event.preventDefault();
   //rest of the logic
}});
1
gurvinder372 2 अप्रैल 2018, 06:47

आप एकाधिक HTML तत्वों के साथ एक ही आईडी का उपयोग नहीं कर सकते। आपको class का उपयोग करना होगा

यदि आप e.preventDefault(); को <div> के अंदर <a> करने का प्रयास कर रहे हैं, तो आप चयनकर्ता $(".band-comments-div a") का उपयोग कर सकते हैं

$(".band-comments-div a").click(function(e) {
  console.log("-> " + $(this).attr('href') );
  e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="band-comments-div"><a href="http://google.com">1</a></div>
<div class="band-comments-div"><a href="http://yahoo.com">2</a></div>
<div class="band-comments-div"><a href="http://stackoverflow.com">3</a></div>
2
Eddie 2 अप्रैल 2018, 06:50

आपके लिंक में बैंड-टिप्पणी वर्ग है। आप इसका उपयोग कर सकते हैं:

$(".band-comments").on("click", function(event) {
    event.preventDefault();
    console.log('clicked!');
});

jsfiddle काम कर रहा है।

2
Roland Ruul 2 अप्रैल 2018, 06:50