Javascript 只有第一个按钮对单击事件作出反应

我有一个jquery函数连接到btn组，如下所示：

<div class="row">
    <!-- Vote button row -->
    <div class="span8" id="votenumbers">
        <div class="btn-group">
            <button class="btn" id="votebutton" data-votevalue="1">1</button>
            <button class="btn" id="votebutton" data-votevalue="2">2</button>
            <button class="btn" id="votebutton" data-votevalue="3">3</button>
            <button class="btn" id="votebutton" data-votevalue="4">4</button>
            <button class="btn" id="votebutton" data-votevalue="5">5</button>
            <button class="btn" id="votebutton" data-votevalue="6">6</button>
            <button class="btn" id="votebutton" data-votevalue="7">7</button>
            <button class="btn" id="votebutton" data-votevalue="8">8</button>
            <button class="btn" id="votebutton" data-votevalue="9">9</button>
            <button class="btn" id="votebutton" data-votevalue="10">10</button>
        </div>
    </div>
</div>

<!-- Vote button row ends -->

---

现在我的问题是，只有第一个按钮对单击事件作出反应。另一个则不然。不确定原因。

您为所有按钮的“id”属性指定了相同的值。Id属性在整个HTML页面中应该是唯一的。您使用的选择器，

$（“#votebutton”）

是一个id选择器，返回单个元素。这就是为什么单击处理程序只对其中一个按钮执行。您应该为每个按钮指定不同的id值，或者根本不指定id

您可以完全删除按钮上的id属性，并使用类选择器来查找按钮：

$('#votenumbers .btn').each(function() { $(this).click(...) ... });

---

非常感谢。我学到了一些新东西。

$('#votenumbers .btn').each(function() { $(this).click(...) ... });