javascript - jQuery document.getready中的多个功能不起作用

This question already has answers here:

Event binding on dynamically created elements?

                                （23个答案）


                4年前关闭。




如果更改task1的输入文本，则文本框task2会按预期更改。

但是，如果我更改文本框task2，则文本框task3不会更改。

我的代码有什么问题？

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript"  src="D:\Website\Jquery/jquery-2.1.4.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#tasks1").change(function () {
                    alert('testingphase1');
                    $("#tasks2").replaceWith('<input type="text" id="tasks2" placeholder="t2">');
                });
                $("#tasks2").change(function () {
                    alert('testingphase2');
                    $("#tasks3").replaceWith('<input type="text" id="tasks3" placeholder="t3">');
                });
            });
        </script>
    </head>

    <body>
        <input type="text" id="tasks1" >
        <input type="text" id="tasks2" placeholder="taks2">
        <input type="text" id="tasks3" placeholder="taks3">
    </body>
</html>

最佳答案

问题是您要替换dom元素，这意味着绑定到先前元素的处理程序将丢失。

使用事件委托来处理动态元素的事件

$(document).ready(function () {
    $(document).on('change', '#tasks1', function () {
        alert('testingphase1');
        $("#tasks2").replaceWith('<input type="text" id="tasks2" placeholder="t2">');
    });
    $(document).on('change', '#tasks2', function () {
        alert('testingphase2');
        $("#tasks3").replaceWith('<input type="text" id="tasks3" placeholder="t3">');
    });
});

注意：如果您可以解释您的要求，那么可能有比仅替换元素更好的解决方案

关于javascript - jQuery document.getready中的多个功能不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31717242/