CODEWITHSUNDEEP
javascriptjqueryhtml
hawkhorrow
hawkhorrow

Reputation: 475

Changing classes to another name so it doesn't activate onClick in jquery, then reset

Background

I am trying to create a jquery function which will change all class names EXCEPT the current object in question, execute a function, and then reset all old classes back, dynamically, without refresh... Anyone know how I can acheive this?

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 */

Not Working Statement That I've Tried

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

Thanks!!!

Upvotes: 1

Views: 265

Answers (1)

adeneo
adeneo

Reputation: 318302

Changing the class at a later time does not remove event handlers that are already attached to the element, you'll need to use off() for that:

$('.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);
    })
}

Upvotes: 1

Related Questions