CODEWITHSUNDEEP
jquery
Sagar
Sagar

Reputation: 484

How to call two functions alternately on clicking an element?

HTML:

<ul>
   <li class='selectable'>Data</li>
   <li class='deselectable'>Data</li>
</ul>

Javascript

$(".selectable").click(function()
{
    alert("select "+$(this).prop("class"));
    //data
    $(this).removeClass('selectable').addClass('deSelectable');
});

$(".deselectable").click(function()
{
    alert("deselect "+$(this).prop("class"));
    //data
    $(this).removeClass('deSelectable').addClass('selectable');
});

This code is working fine when I click li element first time. When I click '.selectable' for first time I am getting "select selectable", and for second time I am getting "select deselectable" instead "deselect deselectable".

How do I alternate between the two methods when I click same 'li' element?

Upvotes: 1

Views: 662

Answers (5)

kushal jain
kushal jain

Reputation: 85

$(".selectable").click(function()
    {
        if ($(this).hasClass('selectable')) {
            $(this).removeClass('selectable').addClass('deselectable');
        } else
            $(this).removeClass('deselectable').addClass('selectable');
        }
    }   
);
$(".doselectable").click(function()
    {
        if ($(this).hasClass('selectable')) {
            $(this).removeClass('selectable').addClass('deselectable');
        } else
            $(this).removeClass('deselectable').addClass('selectable');
        }
    }   
);

Upvotes: 0

RONE
RONE

Reputation: 5485

did you check with .toggleClass() function http://api.jquery.com/toggleClass/,

DEMO

Just check this demo, may be this will help you.

$("li").click(function () {
      $(this).toggleClass("selectable");
    });

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94479

This could be done with one function, a toggle and no dependency on the markup.

var toggle = true;    
$(".selectable,.deselectable").click(function(){
    if(toggle){
       alert("option1");
    }else{
       alert("option2");
    }
    toggle = !toggle;
 });

Working Example: http://jsfiddle.net/2qsKp/

Upvotes: 1

Richard Dalton
Richard Dalton

Reputation: 35793

You can do it all in one event binding:

$(".selectable, .deselectable").click(function()
    {
        if ($(this).hasClass('selectable')) {
            alert("select "+$(this).prop("class"));
            //data
            $(this).removeClass('selectable').addClass('deselectable');
        } else {
            alert("deselect "+$(this).prop("class"));
            //data
            $(this).removeClass('deselectable').addClass('selectable');
        }
    }   
);

However if all you want to do is swap the classes then this will work even better:

$(".selectable, .deselectable").click(function() {
    $(this).toggleClass('selectable deselectable');
});

Upvotes: 2

David Hedlund
David Hedlund

Reputation: 129792

click only binds to the elements matching the selector at the time of binding. You want to use on with delegated events:

$(document).on('click', '.selectable', function() { ... });
$(document).on('click', '.deselectable', function() { ... });

Note that css classes are case sensitive. deSelectable is not deselectable.

If there is a container that will contain all selectable and unselectable, that will not be destroyed and is closer than document, use that instead.

Upvotes: 1

Related Questions