Javascript 按钮互相改变

晚上好

我在将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");
    });
});

$（函数（）{
$（'#me'）。单击（函数（）{
警惕（“我在这里！”）；
$（“#me_div”）.html（“”）；
document.getElementById（“me_div”）.setAttribute（“id”、“noob_div”）；
});
$（'#noob'）。单击（函数（）{
警觉（“我是JS的noob”）；
$（“#noob_div”）.html（“”）；
document.getElementById（“noob_div”）.setAttribute（“id”，“me_div”）；
});
});

当该函数执行时，没有可绑定的

#noob

。每次更改DOM时都需要运行绑定代码，例如：

$(function() {
    window.bindToMe = 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");
            bindToNoob();
        });
    }

    window.bindToNoob = function() {
        $('#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");
            bindToMe();
        });
    }

    bindToMe();
});

$（函数（）{
window.bindToMe=函数（）{
$（'#me'）。单击（函数（）{
警惕（“我在这里！”）；
$（“#me_div”）.html（“”）；
document.getElementById（“me_div”）.setAttribute（“id”、“noob_div”）；
bindToNoob（）；
});
}
window.bindToNoob=函数（）{
$（'#noob'）。单击（函数（）{
警觉（“我是JS的noob”）；
$（“#noob_div”）.html（“”）；
document.getElementById（“noob_div”）.setAttribute（“id”，“me_div”）；
bindToMe（）；
});
}
bindToMe（）；
});
Tom Rees回答会修正你的问题，但是考虑重新考虑你的解决方案。不要在每次单击按钮并重新分配ID时销毁和创建新的HTML！为什么不显示/隐藏


您的
单击
侦听器将附加到特定按钮。替换它们的HTML时，将丢失事件侦听器。您需要重新连接事件侦听器，但最好重新考虑该过程。你想完成什么？你认为这还不够快吗？我正在编写一个最喜欢的内容ajax代码。显示/隐藏比重新生成HTML和重新绑定侦听器更快。我认为这可能是由于我的ajax php文件造成的问题，当你在隐藏时按favorite（通过编辑像google dev app这样的HTML代码），我的数据库将对POST数据感到惊讶。你可以使用开发工具编辑HTML。实际上，您可以直接从控制台发送ajax post请求。处理php文件中的错误请求。你不能控制客户端到那种程度。我已经做到了，我制作了一个安全的php文件，谢谢。
$(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();
    });
});