1

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

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

我在这个元素上附加了一个点击事件：

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

单击编辑按钮时，将调用 editRow 函数。此函数更改 Edit < a > 元素：

$(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) 部分的单击事件。但是，我似乎无法在更改课程时禁用或阻止触发此单击事件。一旦再次单击它就需要触发，而不是在 toggleClass() 上。

我在这里想念什么？

4

3 回答 3

2

我认为你把事情复杂化了。看起来您只需要两个单独的处理程序，一个 foredit-row和一个 for 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/

于 2013-07-26T15:55:52.117 回答
0

您的问题是您将点击处理程序附加到document然后试图从中删除它this不是document，它是点击的a标签。据我了解，您需要在document而不是从this. 但我真的认为你在这方面做得太过分了，只有两个处理程序并将类换掉可能很简单。

于 2013-07-26T15:55:57.813 回答
0

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

$(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/

于 2013-07-26T15:56:36.063 回答