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
Post a Comment