Accordion不适用于使用Ajax后创建的html

Question

我似乎无法让accordion菜单应用于使用jquery附加的新html代码。更复杂的是，我使用ajax函数和for循环从mysql服务器提取数据。执行此操作时，我只能将折叠菜单应用于第一个标题。

$(document).ready(function(){
    $.ajax({                                      
      url: 'database/api.php', data: "", dataType: 'json',  success: function(rows)        
      {
        for (var i in rows)
        {
          var row = rows[i];          
          var code = row[0];
          var process = row[1];

          $('#accordion').append("<h3>"+code+"</h3><div><p>Process: "+process+"</p></div>");


        } 
      } 
    });
    $("#accordion").accordion({collapsible: true, active: false});
});

Answer 1

除非指定，否则ajax请求将以异步方式完成。这意味着它将启动ajax请求并跳到下一条语句，即使它还没有结束。因此，您在追加数据之前初始化了accordion。在for循环之后，将accordion语句移至success。

此外，不要一直将html附加到DOM中。将其全部收集到一个变量中，然后执行一次。

$(document).ready(function(){
$.ajax({                                      
  url: 'database/api.php', data: "", dataType: 'json',  success: function(rows)        
  {
    var innerHtml = "";//variable to store what you want to add
    for (var i in rows)
    {
      var row = rows[i];          
      var code = row[0];
      var process = row[1];

      innerHtml += "<h3>"+code+"</h3><div><p>Process: "+process+"</p></div>";


    }

    $("#accordion").append(innerHtml).accordion({collapsible: true, active: false});
  } 
});

});