Question

我正在尝试编写ADD＆amp;在HTML页面中删除按钮以删除或添加页面中的图像代码。 DELETE按钮将删除按钮前的第一个图像。 ADD按钮将新图像插入HTML页面，删除按钮将插入图像。

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

以下是代码：

<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>

Answer 1

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

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

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

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

Answer 2

改为使用live：

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

Answer 3

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

另一方面，

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

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

    });

Answer 4

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

在jQuery中更改DOM后，Click事件未触发

4 个答案: