jQuery Event after changing class with toggleClass -


i have problem jquery , toggleclass(). want create div, closes on clicking button. button changes , when click again on button div open again.

the problem is: when click on button div closes , class of button changes - thats fine. when click on button new class - nothing happens.

here code:

<div class="content">         <div class="contentclose"></div>         <p>text here</p>     </div> 

and jquery:

$( document ).ready(function() { $(".contentclose").click(     function() {         $(".content").animate({             "height": "45px",             "width": "45px",             "padding": "0px"         }, 1000);         $(".content").children("p").animate({             "opacity": "0"         }, 1000);          $(".contentclose").toggleclass("contentclose contentopen");  } );  $(".contentopen").click(     function() {         $(".content").animate({             "height": "400px",             "width": "200px",             "padding": "50px"         }, 1000);         $(".content").children("p").animate({             "opacity": "1"         }, 1000);          $(".contentopen").toggleclass("contentopen contentclose");  } ); }); 

i hope can me...

you're binding event handlers elements have classes as of when code doing binding runs. code isn't magically re-run rebind things later.

you can use event delegation similar magic, though. change:

$(".contentclose").click(function... 

to

$(document).on("click", ".contentclose", function... 

and change

$(".contentopen").click(function... 

to

$(document).on("click", ".contentopen", function... 

(ideally, use container that's closer buttons document. common ancestor do.)

what bind click ancestor element (document in example), trigger relevant handler based on whether click originated or passed through matching given selector when event bubbling.

so if click reaches document having bubbled (or through) .contentclose button, handler we've attached in line run. if bubbled (or through) .contentclose button, other handler run. it's dynamically determined when click occurs, instead of being statically determined when hook handler.


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -