Question

Not a full-time jQuery nor Javascript dev so sorry if dumb question. I think I need something like the live function for a swapping of class’s I do to handle which value is tied to a selector.

I basically have markup that looks like this:

for unenabling:

<span id="enable-1695" data-id="1695" class="unenable-item">unenable</span>

for enabling:

<span id="enable-1695" data-id="1695" class="enable-item">enable</span>

I’d like to use toggleClass to update to enable-item after unenable is clicked. Also, I need the selector to update the runtime to these new values. I think this used to happen via the live method. How would I achieve this. I am currently doing it manually but the Javascript runtime doesn’t update the event handling correctly.

What javascript would I use to ensure that this worked correctly?

Any help is apprecciated.

thx

Answer 1

Firstly, perhaps “disable” might be a better word-choice here, but we’re not here to nitpick grammar…

I’ll assume that when you click the ‘unenable’ link, it should change to be an ‘enable’ link:

$('.unenable-item').live('click', function () {
    $(this)
        .removeClass('unenable-item')
        .addClass('enable-item')
        .text('enable');
    doSomethingWith($(this).data('id'));
});
$('.enable-item').live('click', function () {
    // the inverse of the above
});

Here, I used the live function which kinda-sorta is like .on or its deprecated alias .bind, except that it doesn’t actually attach the event handler to the objects selected by the selector. Instead it attaches a handler to the document and whenever there is a click on anything, it checks the selector then to see if it matches. You could also use .delegate for more-targetted matching. Better explanation of these things exist in the documentation (linked).