Question

我的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();

}});

但由于div和标签多次出现，因此不会跟踪click事件。还有其他方法可以解决这个问题吗？

Answer 1

您无法为多个元素提供ID。你需要使用课程。由于您提供了多个ID，因此它只会跟踪第一次出现的点击事件。你可以这样做。

<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"));
});

这样，您就可以在点击事件中获取每个href标记的at a。

更新

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

Answer 2

您的链接有乐队评论类。你可以使用它：

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

工作jsfiddle。

Answer 3

您无法对多个HTML元素使用相同的ID。您需要使用class

如果您尝试在e.preventDefault();内<a> <div>，可以使用选择器$(".band-comments-div a")

＆＃13;

$(".band-comments-div a").click(function(e) {
  console.log("-> " + $(this).attr('href') );
  e.preventDefault();
});

＆＃13;

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

＆＃13;

Answer 4

但是由于div和标签有多次出现，所以点击事件未被跟踪。

有重复的ID导致问题 - 这个就是其中之一。

还有其他方法可以解决这个问题吗？

您可以删除id属性（，因为我无法看到它如何有用，因为您无法在选择器中使用它）。 使用选择器中的data-videos-list属性

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

如果div中有多个锚点，那么在选择器中也使用anchor的类

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

Answer 5

非唯一ID是无效的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>

JQuery单击事件，用于具有相同ID的多个标记

5 个答案:

更新