Question

i have this HTML.

<a href="#" class="button redB" style="margin: 4px 4px 4px -4px;" id="estEditItemToggleMode" data-mode="edit">
    <img src="images/icons/light/check.png" alt="" class="icon">
    <span>Enable Editing Mode</span>
</a>

on click i want to keep toggling the value of class attribute and data-mode
it should go like this

if(mode == "edit") {
    class = "button blueB";
    data-mode = "select";
}
else if(mode == "select") {
    class = "button redB";
    data-mode = "edit";
}

i tried using this.

$('#estEditItemToggleMode').live('click', function(e){
    e.preventDefault();
    if($(this).data('mode') == "edit") {
        $(this).removeClass('redB').addClass('blueB');
        $(this).attr('data-mode', 'select');
    }
    else if($(this).data('mode') == "select") {
        $(this).removeClass('blueB').addClass('redB');
        $(this).attr('data-mode', 'edit');
    }
});

this toggle the values only once. and hence no effect on two or more click. how to go with this correctly.

Answer 1

Try like below,

DEMO

$('#estEditItemToggleMode')
     .data('mode', 'edit') //added data to the link
     .live('click', function(e){
        e.preventDefault();

        var $this = $(this);
        var mode = $this.data('mode');

        if(mode == "edit") {
            $this.removeClass('redB').addClass('blueB');
            $this.data('mode', 'select'); //Changed from .attr to .data
        }
        else if(mode == "select") {
            $this.removeClass('blueB').addClass('redB');
            $this.data('mode', 'edit'); //Changed from .attr to .data
        }
 });

and remove the attr data-mode from the markup.

<a href="#" class="button redB" style="margin: 4px 4px 4px -4px;" id="estEditItemToggleMode" >
    <img src="images/icons/light/check.png" alt="" class="icon">
    <span>Enable Editing Mode</span>
</a>

Edit: Cached some redundant jQuery calls.

Edit 2: .live is deprecated so you should either use .on or .delegate

Edit 3: Fiddle output,