Question

页面上有一个值为＆＃34; button1＆＃34;的按钮。按下时，它必须删除自己并添加值为＆＃34; button2＆＃34;的新按钮。当＆＃34; button2＆＃34;按下，它必须删除自己并添加＆＃34; button1＆＃34;背部。有点无限循环。

我知道只需更改按钮的值或至少使用＆＃34; detach（）＆＃34;功能，但这是我在网站上遇到问题的最简单的情况，我目前正在尝试实现这一点，我必须通过按钮交换两个＆＃34; div＆＃34;的数据。

所以，回到问题，事情是＆＃34; button1＆＃34;工作得很好，＆＃34; button2＆＃34;什么也没做。一点帮助将不胜感激。

的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();
    });

});

Answer 1

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

您可以通过与.on()

绑定来解决此问题

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

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

Answer 2

更改为使用.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();
});

Answer 3

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

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

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

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

Answer 4

您需要使用.on jQuery函数。由于您是通过JavaScript创建div的，因此它不在DOM中。

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

不推荐使用

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

Answer 5

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

如果在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();
});

jQuery：与jQuery的Div交换

5 个答案: