javascript - 按钮互相改变

Question

晚上好!

我在将 html 代码转换为新代码时遇到问题，然后按新创建的按钮返回到旧代码。

问题是，当您按下按钮时，该按钮将转换为新的按钮，但是当我再次按下(新创建的代码)时，即使创建的代码是正确的(我的意思是 id 的)，它也不会返回到旧的代码。

这是我的 HTML 代码:

<div id="me_div">
    <a href="#" id= "me" class="btn btn-success">me</a>
</div>

和 JavaScript:

$(function() {
    $('#me').click(function() {
        alert("Here I am!");
        $("#me_div").html('<a href="#" id= "noob" class="btn btn-danger">noob</a>');
        document.getElementById("me_div").setAttribute("id", "noob_div");
    });

    $('#noob').click(function() {
        alert("Im noob with JS.");
        $("#noob_div").html('<a href="#" id= "me" class="btn btn-success">me</a>');
        document.getElementById("noob_div").setAttribute("id", "me_div");
    });
});

Answer 1

汤姆·里斯的回答将解决您的问题，但请考虑重新考虑您的解决方案。不要在每次单击按钮时销毁并创建新的 HTML 并重新分配 ID!为什么不显示/隐藏？

http://jsfiddle.net/agmr2ytd/

$(function() {
    $('#me').click(function() {
        alert("Here I am!");
        $("#me_div").hide();
        $("#noob_div").show();
    });

    $('#noob').click(function() {
        alert("Here I am!");
        $("#noob_div").hide();
        $("#me_div").show();
    });
});