toggling attribute value of anchor tag using jQuery
<p>i have this HTML.</p>

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

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

<pre><code>if(mode == "edit") {
    class = "button blueB";
    data-mode = "select";
}
else if(mode == "select") {
    class = "button redB";
    data-mode = "edit";
}
</code></pre>

<p>i tried using this.</p>

<pre><code>$('#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');
    }
});
</code></pre>

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