jQuery通过ID触发函数只影响第一个元素

jquery triggering a function by id only affects the 1st element

本文关键字：影响 第一个 元素 函数 通过 ID jQuery      更新时间：2023-09-26

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

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

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

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

请改用类。

请注意，您的 DOM 就绪处理程序在点击处理程序中毫无意义，也应该删除。

例如

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

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

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

如果没有其他更近的祖先元素，则document是委托事件的最佳默认值。

注意：避免使用"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>

我可以简单地使用类通过jQuery执行任何操作 像这样

$(function(){
  $(".clickme").click(function(){
     // anything you wanted to do.. for all the links with only one class
   });
});
相关文章：