Question

我有一个AJAX方法，它从数据库的结果列表中删除数据库中的一行。一旦成功删除了行，我希望jQuery从页面中淡出该行。

单击删除按钮后，该行已成功从数据库中删除，但是单击按钮的父项的列表项在使用nearest（）搜索时不会淡出。

这是我的DOM：

<ul>
    <li>
        <div class="two columns alpha">
        </div>
        <div class="ten columns">
            <ul>
                <li><p></p></li>
                <li><p></p></li>
            </ul>
        </div>
        <div class="admin_buttons">
            <div class="two columns">
                <button type="submit" class="admin_button edit_event">Edit</button>
            </div>
            <div class="two columns omega">
                <button type="submit" value="5" class="admin_button delete_event">Delete</button>
            </div>
        </div>
    </li>
</ul>

这是jQuery：

$(document).on('click', '.delete_event', function() {
    $.ajax({
        type: 'POST',
        url: 'php/deleteEvent.php',
        cache: false,
        data: {
            id: $(this).val()
        },
        success: function(data) {
            if(data === 'Error') {
                alert('Error: event not deleted.');
            }
            else
            {
                $(this).closest("li").fadeOut('slow');
            }
        }
    });

});

Answer 1

它没有按预期工作的原因是因为你this回调中的success 你内部的this

.ajax()有一个context选项，用于设置传递给success回调的内容this。你可以使用它：

$.ajax({
    type: 'POST',
    ...
    context: $(this), // set what 'this' will be inside the callback.
    ...
    success: function(data) {
        ...
        // this refers to what we set for context
        this.closest("li").fadeOut('slow'); 
        ...
    }
});

jQuery最近（）不工作

1 个答案: