1

我会尝试向我解释，但直到我都感到困惑。
我正在开发一个每周日历，用户在其中单击一个单元格，显示一个确认操作的提示，然后重新绘制单元格。让我们更详细地说：

html标记：

<td> <a class="free"></a> </td>

JS 代码如下所示（伪代码）：

$(".free").click(function() {
    alert('engaging');
    $(this).text("taken");
    $(this).removeClass("free").addClass("taken");
})

这里出了什么问题？好吧，一旦元素类被替换为“taken”而不是“free”，如果用户再次单击此链接，则会再次显示警报，但它不应该！

我认为jsfiddle 中的这个例子说明了我的场景

先感谢您

4

2 回答 2

4

您的原始语法将处理程序绑定到元素本身，并且处理程序只绑定一次。对元素类的任何后续更改都不会影响处理程序。请改用委托事件。http://api.jquery.com/on/

$(document).on('click','.free', function() {

    alert('engaging');

    $(this).text("taken");
    $(this).removeClass("free").addClass("taken");
});

演示

如果您有多个具有 class 的元素.free，并且您可以通过多次单击动态添加或删除此类，则使用这种类型的处理程序将允许您仅在当前具有 class 的元素上捕获“单击”事件.free。另请注意，替代方法 using.off意味着即使您.free再次添加到元素，处理程序也不会触发 - 任何其他绑定到该元素的“单击”处理程序也不会触发。

于 2012-07-22T21:22:45.523 回答
4

单击处理程序仍将附加到元素，即使您动态更改它的类，您也必须使用off()删除处理程序。

$(".free").on('click', function(){
     alert('engaging');
     $(this).text("reservada").removeClass("free").addClass("taken").off('click');
});

小提琴

于 2012-07-22T21:23:28.643 回答