2

我正在尝试编写 HTML 页面中的添加和删除按钮以在页面中删除或添加图像代码。DELETE 按钮将删除该按钮之前的第一张图像。ADD 按钮将向 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>
4

4 回答 4

9

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

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

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

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

于 2011-10-06T02:52:42.000 回答
3

改用live：

$(".img-post button").live('click', function() { ...
于 2011-10-06T02:52:48.450 回答
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');
        });

    });
于 2011-10-06T02:52:53.243 回答
3

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

于 2011-10-06T02:54:16.127 回答