当文件的 ajax 返回 true 时,我试图“隐藏”一个元素。当我点击#delete
的id时,一个ajax请求被发送到一个处理数据的文件,该文件将返回通过或失败的数据。如果文件返回“已通过”,那么我想隐藏父文件以显示它已“已删除”。
它是动态显示的项目列表。每个项目都有一个“x”,单击该“x”时,系统会提示用户点击确认或取消以从列表中删除该项目。当用户点击确认时,将调用一个 ajax 请求到一个文件,该文件将发送字符串“passed”或“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
,成功后所有项目都会被删除。我只需要删除当前单击元素的父元素。
最佳答案
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();
}
});
}
})
});
关于javascript - 删除被单击元素的父元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25143978/