我有一个使用 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 注册新行有关,或者不能这样做?
最佳答案
当您运行 document.ready 上的代码时,jQuery 确实会在那个时间点 将事件绑定(bind)到所有现有行。要使 jQuery 知道可能的 DOM 更改,您需要使用 jQuery 的 live
功能。为了以最佳方式做你想做的事,你可能想使用 delegate
像这样:
$("#yourTable").delegate("select.fos", "change", function(){
// ....
});
$("#yourTable").delegate("td.remove a", "click", function(){
// ....
});
它的工作方式是通过将事件绑定(bind)到选择器 (#yourTable
) 并让事件向上冒泡,以便涵盖对表格内容的任何修改。
关于php - 处理从 jQuery 中的 AJAX 调用返回的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3748069/