Question

我正在使用一个表作为坐标系，并在每个td元素中使用一个函数来更新字段值。

[ ][ ][X][ ]
[ ][X][X][X]
[X][ ][ ][ ]

当我点击一个空元素时，我希望它在我的数据库中将值设置为“X”，方法是从我的rails应用程序中获取新的部分数据（并发送GET变量），然后重新渲染表格。这可以很好地使用我的rails应用程序，但只有一次。似乎jQuery函数.click（）只运行一次。该函数如下所示：（通过.coffeescript生成）

$(document).ready(function() {
  $(".field").click(function(e) {
    $.get("http://localhost/dinners?ap="+$(this).attr('id'), function(data) {
      $("#dinner_table").html(data);
    });
  });
});

这将运行得很好，一旦我点击一个元素，它将在表格中呈现新数据 - 但只有一次！如果我在函数中交换HTML后重新定义.click（）函数，它允许我点击（和更新）两次，等等。

我很确定这是一个基本问题，但到目前为止搜索没有运气。

Answer 1

委派活动。通过这样做，您只需要将处理程序附加一次。

$(".field").click(function(e) {

将成为：

$("body").on('click', '.field', function(e) {

body可以替换为任何静态父容器。

Answer 2

使用事件委托：

$( '#dinner_table' ).on( 'click', '.field', function () {
    /* your click handler */
});

因此，click-handler绑定在共同的祖先（在本例中为TABLE元素）。

部分数据更新后保留.click（）函数

2 个答案: