JQuery click event for multiple elements with same ID

Question

I have HTML page having below structure of div elements.

<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>

Here, div and a tags are repeated multiple times. The only difference between each anchor tag is that href attribute is different for each. I am trying to handle the click event of every occurrence of the tag like below.

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

}});

But since there are multiple occurrences of the div and a tags, the click event is not tracked. Is there any other way to handle this?

Answer 1

You cannot give ID to multiple elements. You need to use class. Since you are giving multiple IDs it will only track the click event of first occurrence. You can do something like this.

<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>


$(docunment).on("click",".band-comments-div a", function(event) {
  event.preventDefault();
  alert($(this).attr("href"));
});

This way you can get the attr href of each a tag on click event.

Update

$(document).ready(function(){
 var href = ''; 
 $(docunment).on("click",".band-comments-div a", function(event) {
   event.preventDefault();
      href = $(this).attr("href");
  });
  alert(href);
});

Answer 2

Your links have band-comment class. You can use it:

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

Working jsfiddle.

Answer 3

You cant use same id with multiple HTML elements. You need to use class

If you are trying to e.preventDefault(); the <a> inside the <div>, you can use the selector $(".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>

Answer 4

But since there are multiple occurrences of the div and a tags, the click event is not tracked.

Having duplicate ids causes problems - this is one of those.

Is there any other way to handle this?

You can remove id attribute (since I don't see how this is useful anyways as you can't use it in a selector). Use the data-videos-list attribute in the selector

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

If there are going to be multiple anchors in the div, then use anchor's class as well in the selector

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

Answer 5

Non-unique IDs are invalid html so you should a class instead:

$(".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>