Question

我有一个按钮表

<table>
    <tr><input type="button" id="aaa1"></tr>
    <tr><input type="button" id="aaa2"></tr>
    etc
</table>

我想在点击按钮时捕获，所以我写了这段代码：

$('table').on('click', "[id^='aaa']", function(event){
    $(this)....
});

我认为问题是所有按钮都重复了这段代码，但我只是想抓住我点击的按钮。任何人都可以帮助我吗？

Answer 1

尝试：

$("table input[type='button']").on('click', function(event) {
    ...
});

Answer 2

试试这个。

$(document).ready(function(){
    $(".buttons").on("click",function(){
        var value = $(this).attr("value");
        alert(value + " is clicked");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr><input type="button" id="aaa1" value="button1" class="buttons"></tr>
    <tr><input type="button" id="aaa2" value="button2" class="buttons"></tr>
    etc
</table>

Answer 3

你不能直接在tr里面添加元素。在tr里面使用td并在tr里面添加元素

li:nth-child(3n)

$(document).ready(function(){
   $("table input[type='button']").click(function() {
      alert('Button with id = "'+ this.id +'" is clicked');
      console.log(this);

    });
});

Answer 4

您的代码无效，因为表格行中没有表格单元格。

我认为问题是所有按钮都重复此代码

情况并非如此，以下示例应显示此内容。

我会继续使用您当前使用的延迟方法，因为它只为页面添加一个侦听器而不是每个按钮的几个，但是我会略微更改它以捕获type=button，如下所示：

$('table').on('click', 'input[type="button"]', function(event) {
  alert($(this).attr('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="button" id="aaa1" value="B1" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" id="aaa2" value="B2" />
    </td>
  </tr>
</table>

如果单击表中的按钮，如何捕获

4 个答案: