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

执行该函数时，没有#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();
});

Answer 2

Tom Rees的回答将解决您的问题，但请考虑重新考虑您的解决方案。每次单击按钮时都不要销毁和创建新的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();
    });
});

按钮相互改变

2 个答案: