Javascript 修改加载页面后创建的dom元素的html

我有两个单独的AJAX调用。一个从txt文件中获取项目列表并用其创建HTML表，另一个与数据库对话以确定每个项目的成本，然后将其列在每个项目的相应表格单元中（我知道这听起来可能是一种奇怪的方法，但在我们的情况下，这是一个很好的选择…）

问题在于，由于在页面加载后创建了表（或者准确地说，创建了表的行），所以价格没有写入表中。我不知道如何解决这个问题

$(document).ready(function() {
    makeItemTable();
    listPrices();
    ... 
});

function makeItemTable() {
    $.ajax({
        url: 'products.php',
        type: 'GET'
        })
    .done(function(response) {
        $('.price-table > tbody').html(response); 
        })
}

function listPrices() {
    .ajax({
        url: 'prices.php',
        type: 'GET'
}) 
    .done(function(response) {
          priceData = $.parseJSON(response);
          $('.price-table tr').each(function() {
          var item = $(this).find('td:nth-child(1)').text();
          if (priceData[item]) {
               var price = priceData[item];
               $(this).find('td:nth-child(2)').text(price);
         }       
      })
    }

你可以试试

使用setTimeout检查对“products.php”的请求执行回调完成（在对“prices.php”的请求的回调内部）

另一种方式

var jqxhr1 = $.ajax("products.php");
var jqxhr2 = $.ajax("prices.php");
$.when(jqxhr1, jqxhr2).done(function(jqxhr1, jqxhr2) {
 // Handle both XHR objects
  alert("all complete");      
});

在“products.php”的回调请求中调用函数listPrices（）

---

希望对您有所帮助

我会将您的products.php和prices.php组合在一起，这样您只需提出一个请求，而不是两个请求。但是如果不可能，请将

listPrices（）

移动到

makeItemTable（）

ajax调用的成功处理程序中。如果您知道需要多少列，只需创建空列，然后用

listPrices（）

填充它们。杰森，这很好。事实证明，问题其实出在PHP中。一旦我修剪了txt文件中每个项目的尾随空格，它就工作得很好。