Манипулировать данными, возвращенными из вызова AJAX в jQuery - PullRequest
1 голос
/ 20 сентября 2010

У меня есть вызов AJAX с использованием jQuery:

$('.add a').click(function() {
    $.ajax({
        type: 'POST',
        url: '/ajax/fos',
        context: this,
        datatype: 'html',
        success: function(data){
            $(this).parents('tr').before(data);
        }
    });
});

Как только он запускается, он добавляет новую строку в таблицу. Строка дословно отличается от других строк в таблице (по структуре), но без данных.

У меня есть два других вызова jQuery, которые манипулируют данными в строке, но вызовы не работают в новых строках таблицы с использованием вызова AJAX. В частности, при изменении раскрывающегося списка (выбор / опция) он вызывает AJAX для замены содержимого другого раскрывающегося списка. Другая функция удаляет строку, если вы хотите удалить ее.

Это функции, которые не работают:

$('.fos').change(function() {
    $.ajax({
        type: 'POST',
        url: '/ajax/courses',
        context: this,
        data:({
            fos_id: $(this).val(),
            name: $(this).find(':selected').text()
        }),
        success: function(data){
            $(this).next().html(data);
        }
    });
});

$('td.remove a').click(function() {
    $(this).parents('tr').remove();
});

Это как-то связано с вызовом AJAX, который не регистрирует новую строку с DOM, или это не может быть сделано?

1 Ответ

3 голосов
/ 20 сентября 2010

Когда вы запускаете код, который вы имеете в document.ready, jQuery буквально связывает события со всеми существующими строками в этот момент времени .Чтобы jQuery знал о возможных изменениях DOM, вам нужно использовать функциональность jQuery live.Чтобы оптимально делать то, что вы хотите, вы, вероятно, захотите использовать delegate примерно так:

$("#yourTable").delegate("select.fos", "change", function(){
    // ....
});

$("#yourTable").delegate("td.remove a", "click", function(){
    // ....
});

Это работает путем привязки событий к селектору (#yourTable)и позволяя событиям пузыриться до него, чтобы охватить любые изменения содержимого таблицы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...