Question

我使用jQuery进行AJAX调用：

$('.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注册新行，或者这不能做到？

Answer 1

当您运行document.ready上的代码时，jQuery实际上将事件绑定到该时间点的所有现有行。为了让jQuery了解可能的DOM更改，您需要使用jQuery的live功能。为了达到最佳效果，您可能希望使用delegate，如下所示：

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

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

它的工作方式是将事件绑定到选择器（#yourTable）并让事件冒泡到它，以便覆盖对表内容的任何修改。

在jQuery中处理从AJAX调用返回的数据

1 个答案: