[解決済み] jQueryのclickイベントが発生しない？

質問

私はこれを持っています ページ そして、マップをliまでスクロールすると、以下のようなコードになります。

HTML

<ul class="play_navigation">
    <li class="active"><a class="barino_story_bottom" href="#">The Story</a></li>
    <li><a class="barino_video_bottom" href="#">The Video</a></li>
    <li><a class="barino_gallery_bottom" href="#">The Gallery</a></li>
    <li><a class="barino_equipment_bottom" href="#">The Equipment</a></li>                          
</ul>

マイjQuery

<script type="text/javascript">
    $(document).ready(function(){
        $('.play_navigation a').click(function(){
            console.log("this is the click");
            return false;
        });
    });
</script>

リンクをクリックしても何も起こりません...ソースを表示すると、そこにあることがわかります...しかし、コンソールに貼り付けると、うまく動作します...何が起こるのでしょうか？

どうすればいいですか？

このマークアップは非同期にDOMに追加されるのでしょうか？その場合は live ということです。

注意 .live は非推奨とされ、jQueryの最新バージョンでは削除されました（これには理由があります）。使い方や解決策については、以下のイベントデレゲーション戦略を参照してください。

<script>
    $(document).ready(function(){
        $('.play_navigation a').live('click', function(){
            console.log("this is the click");
            return false;
        });
    });
</script>

スクリプトブロックを再実行し、動作させることができたということは、何らかの理由でバインド時に要素が利用できなかったか、バインドがある時点で削除されたのだと思います。もしバインド時に要素がなかったのであれば、バインド時に live (できればイベントデリゲーションも)。そうでない場合は、バインディングを削除するようなことがないか、コードをチェックする必要があります。

jQuery 1.7 のイベントデリゲーションを使っています。

$(function () {

    $('.play_navigation').on('click', 'a', function (e) {
        console.log('this is the click');
        e.preventDefault();
    });

});

また、ドキュメントの準備が整う前にイベントをバインドしたいと感じる場合は、イベントをドキュメントに委譲することもできます (この場合、jQuery はすべてのクリックイベントを調べて、要素が適切なセレクタに一致するかどうかを判断することにも注意してください)。

$(document).on('click', '.play_navigation a', function (e) {
    console.log('this is the click');
    e.preventDefault();
});