CODEWITHSUNDEEP
javascriptjquery
rayashi
rayashi

Reputation: 1851

JQuery event dosen't work after .addClass

Why the div#1 dosen't change text. What i'm doing wrong?

<div id="1" class="a" style="width: 300px;height: 300px; background-color: #003366"></div>
<div id="2" class="b" style="width: 300px;height: 300px; background-color: #003366"></div>

<script>
$(document).ready(function(){
    $(".b").click(function(){
       $(this).text("hello");
    });

    $(".a").mouseover(function(){
      $(this).addClass("b");
    });
});
</script>

Upvotes: 0

Views: 98

Answers (2)

Val
Val

Reputation: 17522

Try this 

$("body")
.on('click', '.a', function (){
   $(this).addClass("b");
})
.on('click', '.b', function (){
    $(this).text("hello");
})

Upvotes: 1

adeneo
adeneo

Reputation: 318222

Event handlers are added to the elements that match the selector at that time, changing the selector later does not magically make the event handler work.

You could use delegated event handlers for this

$(document).ready(function(){
    $(document).on("click", ".b", function(){
       $(this).text("hello");
    });

    $(".a").mouseover(function(){
      $(this).addClass("b");
    });
});

But why are you doing this, it seems like a strange pattern to activate a click handler only after the same element has been hovered, as you couldn't possibly click it unless the mouse is over it ?

Upvotes: 5

Related Questions