最初のクリック後にjquery show（）/ Hide（）が起動しない

Question

最初のクリックイベント後にこのスクリプトが起動しない理由を理解できません。 show（）関数は完全に機能しますが、hide（）は機能しません。問題の

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".event.hidden").click(function() { 
     var div_id = this.id.replace(/But/, 'Div'); 
     $("#" + div_id).show('slow', 'linear'); 
     $(this).attr("src", "images/but_hide_event.png"); 
     $(this).removeClass('hidden').addClass('shown'); 
    }); 
    $(".event.shown").click(function() { 
     var div_id = this.id.replace(/But/, 'Div'); 
     $("#" + div_id).hide('slow'); 
     $(this).attr("src", "images/but_event_info.png"); 
     $(this).removeClass('shown').addClass('hidden'); 
    }); 
}); 
</script> 

ページはhttp://randykrohn.com/schedules.php?Param=all

Answer 1

.live()メソッドを使用する必要があります。準備ができているドキュメントでは、.event.hiddenにバインドしていますが、どの要素にも一致しません。 show関数を実行したら、そのセレクタを再実行する必要があります。もっと単純に、あなたは）（.live使用することができます。

説明：今、 現在のセレクタに一致するすべての要素のと 将来的に イベントにハンドラを接続します。

$(".event.hidden").live('click', function() { ... 

に変更し、それを、あなたは再びショーを使用できるようにしたい場合は、あなたも、このいずれかを実行したいと思う...

$(".event.shown").live('click', function() { ... 

Answer 2

での問題は、DOMが最初の状態になったときに、クラスeventとshownを持つ要素のclickイベントに行動を装着しているということです。つまり、一度、ページが読み込まれます。しかし、その時点での要素がないように見えます。shownクラスの後にはの後に最初にclickというイベントが.event.hiddenのイベントでスワップしているだけです。

あなたはあなたのアプローチを再考すべきである - またはあなたができない場合は、動的に変更とを監視する.live()または.delegate()を使用する必要がありますこれらclickのイベントに新しい動作を添付してください。