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

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 确实会在那个时间点 将事件绑定(bind)到所有现有行。要使 jQuery 知道可能的 DOM 更改，您需要使用 jQuery 的 live功能。为了以最佳方式做你想做的事，你可能想使用 delegate像这样:

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

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

它的工作方式是通过将事件绑定(bind)到选择器 (#yourTable) 并让事件向上冒泡，以便涵盖对表格内容的任何修改。