Question

如何使JQuery以与处理html文件中的原始元素相同的方式处理新元素？例如，请考虑以下示例：

<!DOCTYPE html>
<html>
    <head>
        <title>simple click to switch</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            $edit = "<div>edit</div>";
            $(document).ready(function () {
                $("div").click(function () {
                    $(this).after($edit);
                    $edit = $(this);
                    $(this).remove();
                });
            });
        </script>
    </head>
    <body>
        <div>switch me</div>
    </body>
</html>

我希望这个JQuery块允许我在点击时切换div“切换我”和“编辑”。然而，结果是，它识别原始div，允许单个“切换”。但是新添加的div不被JQuery识别。 div只能切换一次。我该如何解决这个问题？

Answer 1

对于动态添加的元素，您需要使用事件委派来注册处理程序

$(document).on('click', 'div', function () {
                $(this).after($edit);
                $edit = $(this);
                $(this).remove();
            });

演示：Fiddle

另请阅读this

让JQuery识别新添加的元素

1 个答案: