.toggle() doesnt work, executes both

This function below works in stati开发者_如何学编程c pages but in dynamic pages it doesn't work correctly, it executes both functions when clicked the first time.

and when tested with firebug (or jsenav ) it does work correctly

$(document).ready(function() {
    $(".toggleShipingSched").toggle(function(){
    $(this).html("close schedule").addClass("open").parent().animate({height:300+"px"},500);
},
    function(){
    $(this).html("see schedule").removeClass("open").parent().animate({height:34+"px"},500);
})
});

By saying Dynamic I meant that it came from a server generated content. not static HTML And I solved the problem.

I'm gonna take a wild guess here. If you by dynamic page mean that you load something with ajax (or generate with javascript) you will have to bind the .toggle() after the content is loaded and not on document ready (because the elements loaded will not be present in document ready). If you do this you might end up binding .toggle() twice.

Basically, if you run $(".toggleShipingSched").toggle() twice it will not override the first event but rather bind another event to it. When you then click the .toggleShipingSched element two functions will be called.

If this is the problem make sure you unbind the click event before you bind the new toggle().

$(".toggleShipingSched").unbind('click');