Функция JS не работает, когда выполняется запрос AJAX (возможно, проблема с $ (this))

Question

Мой сайт имеет форму, которая вставляет записи в базу данных, используя ajax, в то же время он "обновляет" таблицу, также используя AJAX, на той же странице, где отображается эта новая запись.Код JS

// New Record Div
$('button[type=submit]').click(function() {
    // Read all the form content
    var creditor = $('#selCreditor').val();
    var reason = $('#txtReason').val();
    var value = $('#txtValue').val();
    var debtor = $('#selDebtor').val();
    $.ajax({
    type: 'POST',
    url: 'index/insert/creditor/'+creditor+'/reason/'+reason+'/value/'+value+'/debtor/'+debtor,
    success: function() {
        $('#status').slideDown();
        $('#latestRecords').fadeOut();
        $.ajax({
        type: 'POST',
        url: 'index/latest',
        success: function(html) {
            $('#latestRecords').fadeIn();
            $('#latestRecords').html(html);
        }
        });
    }
    });
    return false;
});

По сути, он вставляет новую запись в базу данных, затем в случае успеха запрашивает страницу, которая содержит только таблицу, и заполняет div возвращенными данными.Это своего рода обновление, когда данные отправляются.Все делается с помощью AJAX.

Я загрузил изображение ситуации для лучшего понимания. image

Проблема

Все идет хорошо, пока вы не попытаетесь удалить «обновленную» строку таблицы.Без AJAX (только нажмите F5) я могу удалить любую нужную строку с помощью кнопки удаления, но когда я вставляю строку и пытаюсь удалить любую строку в таблице, ничего не получится.Это код кнопки удаления

// TR Fading when deleted
$('.delete').click(function() {
    $.ajax({
    type: 'POST',
    url: 'history/delete/id/'+$(this).attr('id')
    });
    $(this).closest('tr').fadeOut('slow', function() { $(this).remove(); });
    $('#latest')
    return false;
});

Я подозреваю, что проблема $(this), которая не относится к элементу кнопки удаления после обновления таблицы, но я не знаю, как это исправить.

Answer 1

Если перезагружается вся таблица, то .click() не будет работать, поскольку она потеряет элементы, к которым она была применена. Попробуйте использовать .live() вместо.

, например

$('.delete').live('click',function(){...});

Также присвойте переменную $(this) и используйте вместо нее переменную, это может помочь сделать код немного более понятным, я думаю. например var $deleteButton = $(this);

Answer 2

взгляните на jquerys live , я думаю, это то, что вы ищете.

Answer 3

В дополнение к Nalums anwser, который заявил, что вы можете использовать .live() - который будет работать, даже если вы добавляете динамические элементы через jQuery - вы должны вместо этого использовать в большинстве случаев более новую .delegate() ( добавленную версию:1.4.2 )

Можно использовать следующим образом:

$("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
});

Или обратитесь к api.jquery.com / делегат / для получения дополнительной информации.