0

データベースからの結果のリストからデータベースから行を削除する AJAX メソッドがあります。行が正常に削除されたら、jQuery でその行をページからフェードアウトさせます。

削除ボタンをクリックすると、行はデータベースから正常に削除されますが、クリックされたボタンの親であるリスト項目は、closest() を使用して検索してもフェードアウトしません。

ここに私の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');
            }
        }
    });

});
4

1 に答える 1

2

期待どおりに動作しない理由はthis、successコールバック内にあるものがクリック ハンドラー内にないためです。this

.ajax()としてコールバックcontextに渡されるものを設定するオプションがあります。あなたはそれを使うことができます：successthis

$.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'); 
        ...
    }
});
于 2012-12-02T05:17:50.553 に答える