Question

的Javascript

$('.btn-delete').each(function () {
    $(this).click(function (e) {
        e.preventDefault();

        var $galleryItem = $(this).closest('.prj-item');

        $.ajax({
            url: '/deletePart/' + $(this).data('id'),
            type: 'GET',
            success: function (response) {

                $galleryItem.fadeOut(500, function () {
                    $galleryItem.remove();
                })

            },
            error: function (error) {
                console.log(error);

            }
        });
    });
});

HTML

<li class="prj-item">
    <div class="pure-u-1-4">
        <div class="prj-image filled" style="background-image:url('/image/1.jpg')">
        </div>
        <a data-id="${part.id}" class="btn-delete-part" href="javascript:void(0);"><i class="icn-close-white"></i></a>
    </div>
</li>

<li class="prj-item">
    <div class="pure-u-1-4">
        <div class="prj-image filled" style="background-image:url('/image/2.jpg')">
        </div>
        <a data-id="${part.id}" class="btn-delete-part" href="javascript:void(0);"><i class="icn-close-white"></i></a>
    </div>
</li>

每个li中都会有一个包含描述的图像列表，以及用于删除的“x”图标。当试图点击第一个li的'x'时，它不会被删除。只有最后一个li可以删除，然后在那之后，可以删除另一个最后一个li。删除顺序无关紧要。

不确定我哪里出错了。任何见解都表示赞赏。

Answer 1

试试这种方式

  $('.btn-delete-part').on('click',function(){

        e.preventDefault();

        var $galleryItem = $(this).closest('.prj-item');

        $.ajax({
            url: '/deletePart/'+$(this).data('id'),
            type: 'POST',
            success: function(response) {

                $galleryItem.fadeOut(500, function(){
                    $galleryItem.remove();  
                });

            },
            error: function( error ) {
            console.log( error );

        }
        });
    });

Answer 2

我认为你是动态添加/删除元素。在这种情况下，您必须将事件委派与on一起使用。

快速参考：

大多数浏览器事件从最深处传播或传播   文档中最里面的元素（事件目标）   一直到身体和文档元素。在互联网上   Explorer 8及更低版本，更改和提交等一些事件不会   原生泡沫，但jQuery修补这些泡沫和创建   一致的跨浏览器行为。

如果省略selector或为null，则将事件处理程序称为   直接或直接约束。每次事件都会调用该处理程序   发生在所选元素上，无论它是直接出现在   来自后代（内部）元素的元素或气泡。

提供选择器时，事件处理程序称为   授权。直接在事件发生时不会调用处理程序   绑定元素，但仅适用于后代（内部元素）   匹配选择器。 jQuery从事件目标起泡事件   到附加处理程序的元素（即最里面的）   最外面的元素）并为其中的任何元素运行处理程序   匹配选择器的路径。

代码：

$('body').on('click', '.btn-delete', function (e) {

    e.preventDefault();

    var $galleryItem = $(this).closest('.prj-item');

    // AJAX: In success 

    $galleryItem.remove(); 

});

演示：http://jsfiddle.net/IrvinDominin/PzB45/

Answer 3

为li的最后ul尝试委托事件处理程序，例如在上一个btn-delete中为li元素触发点击处理程序的位置

$('ul').on('click', 'li:last-child .btn-delete', function (e) {
    e.preventDefault();

    var $galleryItem = $(this).closest('.prj-item');

    $.ajax({
        url: '/deletePart/' + $(this).data('id'),
        type: 'GET',
        success: function (response) {
            $galleryItem.fadeOut(500, function () {
                $galleryItem.remove();
            })
        },
        error: function (error) {
            console.log(error);
        }
    });
});

Answer 4

试试这个：

$('.btn-delete').click();

没有每个..

单击“x”时应删除任何li，但只能删除最后一个li

4 个答案: