Question

我似乎无法将手风琴菜单应用于使用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请求并跳转到下一个语句，即使它尚未完成。因此，在附加数据之前初始化手风琴。在for循环之后将accordion语句移动到成功。

另外，不要继续向DOM添加html。将它全部收集在变量中并进行一次。

$(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});
  } 
});

});

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

1 个答案: