Question

I have a jquery function attached to a btn-group like this:

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

and this is the javascript im using to assign a function to each button.

$('#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

Now my problem is that only the first button is reacting to a click event. The other do not. Not sure why.

Answer 1

You assigned the same value for the ‘id’ attribute to all your buttons. Id attribute is supposed to be unique across the entire HTML page. The selector you used, $('#votebutton'), an id selector, returns a single element. This is why the click handler is only executing for one of your buttons. You should assign a different id value to each button, or no id at all.

You could get rid of the id attributes on the buttons altogether and use a class selector instead, to find the buttons:

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