jquery button click trigger working only with first button

Question

why only the first button onclick is triggered ? i 2 others don't trigger any event when i click them , also no error in the console i have :

<script>
$(document).ready(function(){

             var name_of_sender ="";
             var text_of_sender ="";

             var $dialog = $('<div></div>')
            .html('This dialog will show every time!')
            .dialog({
                autoOpen: false,
                title: 'Basic Dialog'
            });



            $("#edit_text").click(function() {

                var butName = $(this).attr("name");
                var user_id = butName.split("_")[1];
                alert(user_id);
                name_of_sender = $('#username_'+user_id).html();
                text_of_sender = $('#text_'+user_id).html();

                alert(name_of_sender);
                alert(text_of_sender);

                $dialog.dialog('open');
                // prevent the default action, e.g., following a link
                return false;
            });
});
</script>
<table>
<tbody>
<tr>
    <td id="username_33">test</td>
    <td id="text_33">asdasdasd</td>
    <td>2012-09-27</td>
    <td>217.xx.xx.6</td>
    <td>
    <button id="edit_text" name="id_33">Edit</button>
    </td>
</tr>
<tr>
    <td id="username_34">test</td>
    <td id="text_34">asdasdasd</td>
    <td>2012-09-27</td>
    <td>217.xx.xx.6</td>
    <td>
    <button id="edit_text" name="id_34">Edit</button>
    </td>
</tr>
<tr>
    <td id="username_35">test</td>
    <td id="text_34">asdasdasd</td>
    <td>2012-09-27</td>
    <td>217.xx.xx.6</td>
    <td>
    <button id="edit_text" name="id_35">Edit</button>
    </td>
</tr>
</tbody>
</table>

Your HTML is invalid because you're using the same id more than once. This is also why the jQuery cannot select more than the first instance. — Sparky
– Sparky, Commented Sep 27, 2012 at 16:57

wirey00 · Accepted Answer · 2012-09-27 16:54:55Z

6

ID's should be unique.. Using the ID selector - it will only select the first element found with that ID - hence the event handler is only bound to the first button For your code you can change it to

$("button[name^=id_]").click(function() {

or change your id's to class and use class selector

answered Sep 27, 2012 at 16:54

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adil · Accepted Answer · 2012-09-27 16:57:37Z

1

You should have unique id for elements, you can use name with wild cards to bind click with all buttons

    $("input[type=button][id^=id_").click(function() {

            var butName = $(this).attr("name");
            var user_id = butName.split("_")[1];
            alert(user_id);
            name_of_sender = $('#username_'+user_id).html();
            text_of_sender = $('#text_'+user_id).html();

            alert(name_of_sender);
            alert(text_of_sender);

            $dialog.dialog('open');
            // prevent the default action, e.g., following a link
            return false;
        });

answered Sep 27, 2012 at 16:57

Adil

148k25 gold badges217 silver badges207 bronze badges

Comments

Milo · Accepted Answer · 2012-10-30 14:27:45Z

0

Ok, the examples above seems to work for some people but wasn't working for me.

This way very button named Edit works the same:

$('#Edit').live('click', function () {

});

answered Oct 30, 2012 at 14:27

Milo

3181 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

jquery button click trigger working only with first button

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related