javascript - jQuery .click 和 .html 不工作

Question

我正在尝试使用 jQuery 创建游戏，但第一个选择之后的所有选项都不起作用

抱歉，我没有有效的示例

--- jQuery ---
$(document).ready(function() {
    $(".console").animate({ scrollTop: $(".console").prop("scrollHeight") - $('.console').height() }, 1000);
    $(".controls").html("<a id=\"00001\">left</a> <a id=\"00002\">right</a>");
    $("#00001").click(function() {
        $(".console_top").append("you turned left\n<br />");
        $(".controls").html("<a id=\"00003\">jump</a> <a id=\"00004\">sit</a>");
        $(".console").animate({ scrollTop: $(".console").prop("scrollHeight") - $('.console').height() }, 1000);
    });
    $("#00002").click(function() {
        $(".console_top").append("you turned right\n<br />");
        $(".controls").html("<a id=\"00003\">jump</a> <a id=\"00004\">sit</a>");
        $(".console").animate({ scrollTop: $(".console").prop("scrollHeight") - $('.console').height() }, 1000);
    });
    $("#00003").click(function() {
        $(".console_top").append("you jumped\n<br />");
        $(".controls").html("<a id=\"00003\">jump again</a> <a id=\"00004\">sit</a>");
        $(".console").animate({ scrollTop: $(".console").prop("scrollHeight") -         $('.console').height() }, 1000);
    });
    $("#00004").click(function() {
        $(".console_top").append("you sit\n<br />");
        $(".controls").html("<a id=\"00004\">stay siting</a> <a id=\"00005\">stand up</a>");
        $(".console").animate({ scrollTop: $(".console").prop("scrollHeight") - $('.console').height() }, 1000);
    });
    $("#00005").click(function() {
        $(".console_top").append("you stand up\n<br />");
        $(".controls").html("<a id=\"00006\">Win this game</a> <a id=\"00007\">Lose This Game</a>");
        $(".console").animate({ scrollTop: $(".console").prop("scrollHeight") - $('.console').height() }, 1000);
    });
    $("#00006").click(function() {
        $(".console_top").append("you win\n<br />");
        $(".controls").html("You're still here? It's over! Go home!");
        $(".console").animate({ scrollTop: $(".console").prop("scrollHeight") - $('.console').height() }, 1000);
    });
    $("#00007").click(function() {
        $(".console_top").append("you lost the game\n<br />");
        $(".controls").html("crap now i lost the <a href=\"http://en.wikipedia.org/wiki/The_Game_(mind_game)\">game</a>");
        $(".console").animate({ scrollTop: $(".console").prop("scrollHeight") - $('.console').height() }, 1000);
    });
});


--- html ---
<div class="main">
<!--Game Console-->
<div class="console">
<div class="console_top">
<br />

</div>
<div class="console_bottom">
<br />
<br />
</div>
</div>
<!--END Game Console-->
<!--Game Controls-->
<div class="controls">

</div>
<!--END Game Controls-->
</div>

Answer 1

因为#00001、#00002...等是动态添加的，所以需要使用live功能。 例如:

$('#00001').live('click', function() { do your stuff here });