1

There is a button on a page with value "button1". When pressed, it must delete itself and add new button with value "button2". When "button2" is pressed, it must delete itself and add "button1" back. Kinda infinite loop.

I know that it can be done just by changing the value of a button or at least using "detach()" function, but it is the simplest case of my problem in a website that I'm currently trying to implement where I must interchange two "div"s full of data by buttons.

So, back to the problem, the thing is while "button1" works fine, "button2" does nothing. A bit of help will be appreciated.

index.html

<!DOCTYPE html>
<html>

    <head>
        <script src = "http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src = "script.js" type = "text/javascript"></script>
    </head>


    <body>
        <div id = "div1">
            <input type = button id = "button1" value = "button1" />
        </div>
    </body>

</html>

script.js

$(document).ready (function() {
    $("#button1").click (function() {
        $("body").append ("<div id = 'div2'></div>");
        $("#div2").append ("<input type = button id = 'button2' value = 'button2' />");
        $("#div1").remove();
    });

    $("#button2").click (function() {
        $("body").append ("<div id = 'div1'></div>");
        $("#div1").append ("<input type = button id = 'button1' value = 'button1' />");
        $("#div2").remove();
    });

});
4

5 回答 5

2

#button2没有响应单击，因为它在绑定click()事件时不存在。

您可以通过绑定来解决此问题.on()

$(document).on('click', '#button1', function() {
    ....
});

$(document).on('click', '#button2', function() {
    ....
});
于 2013-06-20T13:42:51.650 回答
1

操作 DOM 时，附加到按钮的事件处理程序不会再次附加。页面加载后您有类似的问题 - button2 不存在并且没有单击事件。

如果您在 DOM 操作后重新生成事件，它将起作用：

function set_events() {
    $("#button1").click (function() {
        $("body").append ("<div id = 'div2'></div>");
        $("#div2").append ("<input type = button id = 'button2' value = 'button2' />");
        $("#div1").remove();
        set_events();
    });

    $("#button2").click (function() {
        $("body").append ("<div id = 'div1'></div>");
        $("#div1").append ("<input type = button id = 'button1' value = 'button1' />");
        $("#div2").remove();
        set_events();
    });
}

$(document).ready (function() {
    set_events();
});
于 2013-06-20T13:50:22.963 回答
1

您将需要使用.onjQuery 函数。由于您是通过 JavaScript 创建 div 并且它还没有在 DOM 中。

与此处相同：https ://stackoverflow.com/a/1207393/1165441

.live已弃用，因此您可以忽略，除非您使用的是旧版本的 jQuery。

于 2013-06-20T13:46:07.607 回答
1

更改为使用.on，因为正在动态添加元素：

$(document).on("click", "#button1", function() {
    $("body").append ("<div id = 'div2'></div>");
    $("#div2").append ("<input type = button id = 'button2' value = 'button2' />");
    $("#div1").remove();
});

$(document).on("click", "#button2", function() {
    $("body").append ("<div id = 'div1'></div>");
    $("#div1").append ("<input type = button id = 'button1' value = 'button1' />");
    $("#div2").remove();
});
于 2013-06-20T13:43:30.317 回答
1

您正在尝试将点击处理程序附加到最初不存在的元素，并且它不会附加到您动态创建的元素。

尝试使用on() jQuery 函数，或者在早期的 jQuery 版本中，使用live()函数，如下所示：

$(document).on("click", "#button1", function() {
    (...)
});

$(document).on("click", "#button2", function() {
    (...)
});
于 2013-06-20T13:44:35.267 回答