Question

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

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

Answer 1

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

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

改用类。

请注意您的DOM就绪处理程序在单击处理程序中是没有意义的，也应该被删除。

e.g。

$(".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"，因为它有一个错误（如果计算的主体高度为零，例如，如果内容绝对定位，鼠标事件将不会在某些浏览器上冒泡）。

Answer 2

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

引用它

$(".applebutton")

而不是

$("#applebutton")

Answer 3

您不能再次使用相同的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>

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

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

   });
});

jquery按id触发函数只影响第一个元素

3 个答案: