Question

I’m having trouble building a bit of jquery that grabs a selector that has been modified after a previous event.

For example, I have a some html which looks like this:

<div class='1'>test</div>

if i click it with the following:

$(".1").click(function(){
    alert('found 1!'); 
    $(this).attr('class', '2');
});

the alert works and when i inspect the element, the class has been switched to ‘2’

now when i click it again, with the following:

$(".2").click(function(){
    alert('found 2!'); 
    $(this).attr('class', '1');
});

I still get ‘found 1!’ as an alert.

Is what i’m trying not possible for some reason, am i doing it wrong or is there a better way of doing it? Thanks!

Answer 1

You need to use jquery .on() (or .delegate()) function to bind events for dynamically updated elements.

As below code,

$(".1").on("click", function(){
    alert('found 1!'); 
    $(this).attr('class', '2');
});

$(".2").on("click",function(){
    alert('found 2!'); 
    $(this).attr('class', '1');
});