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

Question

我有两个单独的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);
         }       
      })
    }

Answer 1

你可以试试

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

2. 其他方式

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

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

希望对大家有帮助