Question

我在“a”元素上有一个点击事件：

<a href="#" class="edit-row">Edit</a>

我已将click事件附加到此元素：

$(document).on('click', "a.edit-row", editRow);

单击编辑按钮时，将调用editRow函数。此功能更改编辑＆lt; a＆gt;元素：

$(this).find("a.edit-row").html("Save").removeClass("edit-row").addClass("save-row").off('click').click(saveRow);

一切正常。

单击“保存”时，将调用saveRow函数。在这个函数中，我想恢复到“编辑”按钮。

这是我用来实现此目的的一个版本：

$(this).off('click').html("Edit").toggleClass("save-row").toggleClass("edit-row");

我也尝试了其他一些事情。但是发生了什么，点击保存后，它会更改为编辑，但会立即更改为再次保存。

看起来$（document）部分的click事件被触发了。但是，我似乎无法禁用或阻止在更改类时触发此单击事件。它需要在再次单击时触发，而不是在toggleClass（）上。

我在这里缺少什么？

Answer 1

我认为你过于复杂化了。看起来您只需要两个独立的处理程序，一个用于edit-row，另一个用于save-row。您根本不必删除点击处理程序。

$(document).on('click','a.edit-row', function() {
 $(this).toggleClass('edit-row save-row').html('Save');
 //do other stuff in your editRow function
});

$(document).on('click','a.save-row', function() {
 $(this).toggleClass('edit-row save-row').html('Edit'); 
 //do other stuff in your saveRow function
});

你可以在这里看到一个例子。 http://jsfiddle.net/cc9he/

Answer 2

您的问题是，您正在将点击处理程序附加到document，然后尝试将其从this document移除，而不是a，它是点击的document } 标签。根据我的理解，您需要删除this上的点击处理程序，而不是{{1}}。但是我确实认为你已经开始使用它了，只需要两个处理程序并将类交换掉就可以了。

Answer 3

您可以使用类名使用委托来确定要调用的函数。

$(function() {
    $(document).on('click', "a.edit-row", editRow);
    $(document).on('click', "a.save-row", saveRow);
});

function editRow() {
     $(this).html("Save").removeClass("edit-row").addClass("save-row");
}


function saveRow() {
    $(this).html("Edit").removeClass("save-row").addClass("edit-row");
}

http://jsfiddle.net/Z96pp/

阻止toggleClass上的click事件

3 个答案: