Javascript jquery通过id触发函数只影响第一个元素

我试图触发一个弹出式通知时，锚点击。为此，我使用jquery并通过其ID触发按钮。我有几个ID相同的按钮，我想在用户单击时触发相同的通知。但是现在通知只出现在id为的最上面的元素中

$("#applebutton").click(function(e){
    $(function() {
        setTimeout(function() {
            $.bootstrapGrowl("Notification", { 
                type: 'info',
                align:'center',
                width:'auto',
            });
        }, 100);
    });
});

---

ID在每个文档上下文上必须是唯一的，才能成为有效的HTML

浏览器有一个快速查找表，每个键值只包含一个元素，因此任何按ID进行的搜索都只返回第一个匹配项

改用类

请注意，DOM就绪处理程序在click处理程序中没有意义，也应该删除

e、 g

或者，如果它们是动态添加的，请使用附加到非更改祖先的委派事件处理程序：

$(document).on("click", ".applebutton", function(e){
    setTimeout(function() {
        $.bootstrapGrowl("Notification", { 
            type: 'info',
            align:'center',
            width:'auto',
        });
    }, 100);
});

文档

是委托事件的最佳默认值，前提是没有其他更接近的祖先元素

---

注意：避免使用

“body”

，因为它有一个bug（如果计算的body高度为零，例如，如果内容是绝对定位的，则在某些浏览器上鼠标事件不会向其冒泡）。

id应该是唯一的，这就是为什么会发生这种情况。如果希望有多个具有相同标识符的元素，请使用class而不是id，并使用

$(".applebutton")

而不是

$("#applebutton")

---

您不能再次使用相同的id，请使用可以在任何地方使用的类。它会解决你的问题。 例如，我有这样的HTML代码

<ul>
 <li><a href="#popup" class="clickme" >CLick 1</a></li>
 <li><a href="#popup" class="clickme" >CLick 2</a></li>
 <li><a href="#popup" class="clickme" >CLick 3</a></li>
</ul>

---

我有几个按钮具有相同的id

这是无效的。使用类对元素进行分组。您还可以从单击处理程序中删除

$（function（）{}）

。如果无法将其提供给类，请假设我有两个锚具有相同的类，并且我只希望其中一个会弹出通知，当我向下滚动时，我有另外两个按钮具有相同的类，并且只有一个会弹出通知。那么最有效的解决方案是什么呢？那么，只将类应用于要触发事件的元素。如果您也显示HTML，我们可以显示更精确的解决方案。

<ul>
 <li><a href="#popup" class="clickme" >CLick 1</a></li>
 <li><a href="#popup" class="clickme" >CLick 2</a></li>
 <li><a href="#popup" class="clickme" >CLick 3</a></li>
</ul>

$(function(){
  $(".clickme").click(function(){
     // anything you wanted to do.. for all the links with only one class

   });
});