jQuery中的DOM更改后单击事件未触发答案

【问题标题】：Click event is not firing after DOM changes in jQueryjQuery中的DOM更改后单击事件未触发
【发布时间】：2011-12-01 23:06:10
【问题描述】：

我正在尝试对 HTML 页面中的添加和删除按钮进行编码，以在页面中删除或添加图像代码。 DELETE 按钮将删除该按钮之前的第一张图像。添加按钮将在 HTML 页面中插入新图像，而删除按钮将插入图像。

代码工作正常：单击删除按钮时删除图像，单击添加按钮时插入图像。问题是：单击添加按钮后插入的删除按钮不起作用。因此，如果您单击添加按钮，然后单击删除按钮，图像将不会隐藏；点击事件未触发。

代码如下：

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

        $(document).ready(function(){
            $('.img-post input').after('<button type="button" >Delete</button>');

            $(".img-post button").click(function() {
                    $(this).prev().prev().remove();
                    $(this).prev().remove();
                    $(this).remove();
            });

            $(".add-img button").click(function() {
                    $('<img  src="image3.jpg" /><input type="hidden" name="allimages[]" value="image3.jpg" /><button type="button" >Delete</button><br />').appendTo('.img-post');
            });

        });


        </script>   
    </head>
    <body>
            <div class="img-post">
                <img  src="image1.jpg" /><input type="hidden" name="allimages[]" value="image1.jpg" /><br />
                <img  src="image2.jpg" /><input type="hidden" name="allimages[]" value="image2.jpg" /><br />
            </div>

            <div class="add-img">
                <button type="button" >Add image</button>
            </div>

    </body>
</html>

【问题讨论】：

这能回答你的问题吗？ Event binding on dynamically created elements?

标签： jquery jquery-click-event

【解决方案1】：

使用live()而不是click()将事件处理程序绑定到按钮的点击事件：

$(".img-post button").live('click', function() {
    $(this).prev().prev().remove();
    $(this).prev().remove();
    $(this).remove();
});

这将确保在初始 DOM 加载后添加的与选择器匹配的所有按钮也将触发相同的功能。

http://api.jquery.com/live/

【讨论】：

请注意，从 jQuery 1.9 开始，该函数已被删除
Live 现已替换为 .on

【解决方案2】：

改用live：

$(".img-post button").live('click', function() { ...

【讨论】：

【解决方案3】：

您必须将您的 .click(fn) 处理程序更改为 .live("click", fn)。您的 .click() 处理程序仅适用于 document.ready 时页面中的元素。您动态添加的元素当时不存在，因此它们没有点击处理程序。

另一方面，.live() 查看顶层的点击，然后检查它们是否在匹配的对象上被点击，并且将使用在初始化代码运行后动态添加到页面的对象. .live() 仅适用于某些事件（冒泡事件），但 click 是它适用的其中之一。

    $(document).ready(function(){
        $('.img-post input').after('<button type="button" >Delete</button>');

        $(".img-post button").live("click", function() {
                $(this).prev().prev().remove();
                $(this).prev().remove();
                $(this).remove();
        });

        $(".add-img button").live("click", function() {
                $('<img  src="image3.jpg" /><input type="hidden" name="allimages[]" value="image3.jpg" /><button type="button" >Delete</button><br />').appendTo('.img-post');
        });

    });

【讨论】：

【解决方案4】：

尝试使用 jQuery live 函数。这会将点击处理程序绑定到与您的选择器匹配的元素，即使它们在您的页面最初加载时不存在于 DOM 中（在您的示例中就是这种情况）。

【讨论】：