Question

当文件的ajax返回true时，我试图“隐藏”一个元素。当我单击#delete的id时，会将ajax请求发送到处理将返回通过或失败的数据的文件。如果文件返回'pass'，我想隐藏父文件以显示它已被'删除'。

这是动态显示的项目列表。每个项目都有一个'x'，单击时，系统会提示用户点击确认或取消以从列表中删除该项目。当用户点击确认时，会向一个文件调用ajax请求，该文件将发送字符串'pass'或'failed'。

这是在javascript方面发生的事情：

$('#delete').on('click', function() {

    var $that = $('#delete');

    bootbox.confirm("Are you sure you want to delete this event?", function(r) {

        // r is the result, true or false

        if(r) {

            $.post('panel', {"id": $that.data('id')}, function(data) {

                if(data.status === 'passed') {

                    $that.parent().fadeOut();

                }

            });

        }

    })

});

这一切都有效，但仅适用于第一个列表项。如果我点击第二个或第三个项目上的#delete，则没有任何反应。如果我点击第一个项目并成功删除了父项，我就无法对其他项目执行相同操作。

<li>
    <h4>Staff Meeting</h4>

    <p>

        This is a staff meeting 

    </p>

    <cite>
        <i class="fa fa-clock-o"></i> 
        1 day from now
    </cite>

    <span id="delete" data-id="1"><i class="fa fa-times"></i></span>
    <span id="edit" data-id="1"><i class="fa fa-edit"></i></span>

</li>


<li>
    <h4>Staff Meeting</h4>

    <p>

        This is another staff meeting   

    </p>

    <cite>
        <i class="fa fa-clock-o"></i> 
        16 hours ago
    </cite>

    <span id="delete" data-id="2"><i class="fa fa-times"></i></span>
    <span id="edit" data-id="2"><i class="fa fa-edit"></i></span>

</li>

发送到文件的数据是data-id，表示项目的ID。在PHP方面，这是从数据库中删除具有指定id的项目的位置。如果成功删除，我将返回{"status": "passed"}的json响应，并在客户端隐藏列表项，表明它已成功删除。

修改

现在id已更改为class，成功时所有项目都将被删除。我只需要删除当前点击元素的父元素。

Answer 1

id必须是唯一的。处理程序（正确地）仅应用于它找到的第一个id="delete"元素。如果要将相同的处理程序应用于多个删除按钮，请为它们提供一个共享类，并将处理程序应用于：

<span class="delete" data-id="1"><i class="fa fa-times"></i></span>

$('.delete').on('click', function() {

    var $that = $(this);  

    bootbox.confirm("Are you sure you want to delete this event?", function(r) {

        // r is the result, true or false

        if(r) {

            $.post('panel', {"id": $that.data('id')}, function(data) {

                if(data.status === 'passed') {

                    $that.parent().fadeOut();

                }

            });

        }

    })

});

Answer 2

Ids在文档中是唯一的。尝试删除是一个类。

要仅引用被点击的项目，请使用$（this）

$().on('click', '.delete' function() {

  var $that = $(this);
  ...

删除单击元素的父级

2 个答案: