只有第一个按钮对点击事件做出反应答案

【问题标题】：Only the first button is reacting to a click event只有第一个按钮对点击事件做出反应
【发布时间】：2012-09-29 21:09:52
【问题描述】：

我有一个像这样附加到 btn-group 的 jquery 函数：

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

这是用于为每个按钮分配功能的 javascript。

$('#votebutton').each(function(){
    $(this).click(function(){
        var votevalue = $(this).data('votevalue');
        var filename = $('.mainimage').data('filename');
        var category = $('.mainimage').data('category');
            $.ajax({
                type: 'POST',
                url: '?category=' + category,
                data: {
                    "votevalue" : votevalue,
                    "filename" : filename
                },
                success: function(data){
                    $('body').html(data);
                }
        }); // end ajax
    }); // end click
}); // end each

现在我的问题是只有第一个按钮对点击事件做出反应。另一个没有。不知道为什么。

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

您为所有按钮的“id”属性分配了相同的值。 id 属性在整个 HTML 页面中应该是唯一的。您使用的选择器 $('#votebutton') 是一个 id 选择器，它返回单个元素。这就是为什么单击处理程序仅针对您的一个按钮执行的原因。您应该为每个按钮分配不同的 id 值，或者根本没有 id。

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

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

【讨论】：

谢谢。学到了一些新东西。