Question

我将点击事件绑定到所有td，如下所示：

$(document).ready(function(){
  $("#table").on("click","td",clickHandler);
});

如何在点击后点击clickHandler中的特定td？

Answer 1

你可以试试这个：

＆＃13;

$('td').toArray().forEach(td => {
  td = $(td);
  
  td.attr('onclick', 'alert(this.id)');
});

$(document).on('click', 'td', function () {
  $(this).removeAttr('onclick');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
  <tr>
    <td id="td1">Item 1</td>
    <td id="td2">Item 2</td>
    <td id="td3">Item 3</td>
    <td id="td4">Item 4</td>
  </tr>
</table>

＆＃13;

我的想法：点击后删除属性，将onclick属性设置为td标记。

Answer 2

试试这个。不建议您不需要添加/删除class，也不需要修改onclick属性作为内联事件。

我在这里做的是以稍微不同的方式绑定点击事件。

您正在做的是$("#table").on("click", "td", clickHandler) - 它会将事件绑定到#table，然后点击过滤td。

现在我正在做的是$("#table td").on("click",clickHandler) - 它会将事件绑定到td内的所有#table。因此，当点击事件发生时，td可以关闭特定的click $(this).off("click");

＆＃13;

$(document).ready(function(){
  $("#table td").on("click",clickHandler);
});

var clickHandler = function(){
  console.log(this);
	$(this).off("click");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
    <td>Item 4</td>
  </tr>
</table>

＆＃13;

Answer 3

如果您只想让每个表格单元格点击事件绑定一次，请使用.one()：

$("td").one("click",function(){
    $(this).off("click");
});

$("td").one("click", function() {
  console.log($(this).text())
  $(this).off("click");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
    <td>Item 4</td>
  </tr>
</table>

jQuery - 单击后删除td的click事件

3 个答案: