jquery - 每个/单击功能不起作用

Question

编辑:这有效，但不确定为什么？

  $('button').each(function() {
    $(this).bind(
        "click",
        function() {
            alert($(this).val());
        });
  });

我不确定为什么这不起作用...现在，我只是尝试使用按钮值输出警报，但它在我的页面上不起作用。我在 Firebug 中没有收到任何控制台错误，也看不到任何阻止其工作的内容。

我的 HTML 看起来像这样:

<table id="addressbooktable">
<thead>
    <tr>
        <th>Name</th>
        <th>Action</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td>7892870</td>
        <td><button id="button-20" class="custom-action" value="XY89" name="info">Click</button></td>
    </tr>

    <tr>
        <td>9382098</td>
        <td><button id="button-21" class="custom-action" value="XY544" name="info">Click</button></td>
    </tr>

    <tr>
        <td>3493900</td>
        <td><button id="button-22" class="custom-action" value="XY231" name="info">Click</button></td>
    </tr>
</tbody>
</table>

代码如下所示:

  $('button').each(function() {
    $(this).click(function() {
      alert($(this).val());
    }
  });

但是，点击它根本没有任何反应？难道是我使用不当？

Answer 1

您可以像这样将所有按钮绑定(bind)为单击事件，无需循环遍历它们

$(function(){
    $("button").click(function() {
        alert($(this).attr("value"));
    });
});

但更精确的选择器可能是:

$(function(){
    $("button[id^='button-'").click(function() {
        alert($(this).attr("value"));
    });
});