javascript - 将类更改为另一个名称，这样它就不会在jquery中激活onClick，然后重置

Question

背景

我正在尝试创建一个 jquery 函数，它将更改除当前有问题的对象之外的所有类名，执行一个函数，然后动态地重置所有旧类，无需刷新...任何人都知道我如何实现这一点？

HTML

<div class="view_link">
    <a href="#" class="edit_link" data-link="edit_input_a">Edit</a>
    <span class="edit_input_a"><input type='text' name='input' /></span>
</div>        
<div class="view_link">
    <a href="#" class="edit_link" data-link="edit_input_z">Edit</a>
    <span class="edit_input_z"><input type='text' name='input' /></span>
</div>
<div class="view_link">
    <a href="#" class="edit_link" data-link="edit_input_9">Edit</a>
    <span class="edit_input_9"><input type='text' name='input' /></span>
</div>

Javascript

$('.edit_link').click(function(e) {
    //set which fields to act upon
    var edit_field = $(this).data('link');
    //Open the editable field of the corresponding item
    $("." + edit_field).slideDown(700,'linear');

    /* now change all the other a links with class 'edit_link' to edit_link_inactive (EXCEPT THE CURRENT OBJECT BEING WORKED ON) so if the user clicks another link at the same time, it will not run through the click function */

   //Run Ajax Function

   /* On succeed, reset all classes with 'edit_link_inactive' back to edit_link */

我尝试过的无效声明

$('.edit_link').not(this).attr('class', "inactive");

谢谢!!!

Answer 1

稍后更改类不会删除已附加到元素的事件处理程序，您需要为此使用 off():

$('.edit_link').on('click', doStuff);

function doStuff(e) {
    var edit_field = $(this).data('link');
    $("." + edit_field).slideDown(700,'linear');
    ....

    $('.edit_link').not(this).off('click', doStuff);

    $.ajax({
        ......
    }).always(function() {
         $('.edit_link').on('click', doStuff);
    })
}