Question

为什么只触发第一个按钮onclick？当我点击它们时，其他2个人不会触发任何事件，控制台也没有错误我有：

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

Answer 1

ID应该是唯一的..使用ID选择器 - 它只会选择使用该ID找到的第一个元素 - 因此事件处理程序仅绑定到第一个按钮对于您的代码，您可以将其更改为

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

或将您的ID更改为类并使用类选择器

Answer 2

您应该拥有元素的唯一ID，您可以使用带外卡的名称来绑定所有按钮的

    $("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;
        });

Answer 3

好的，上面的例子似乎适用于某些人但不适合我。

这种名为Edit的按钮的工作方式相同：

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

});

jquery按钮单击触发器仅与第一个按钮一起工作

3 个答案: