0

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});
});
4

1 に答える 1

1

指定しない限り、ajax リクエストは非同期で行われます。これは、ajax リクエストを開始し、完了していなくても次のステートメントにスキップすることを意味します。したがって、データが追加される前にアコーディオンを初期化します。for ループの後に、アコーディオン ステートメントを 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});
  } 
});

});
于 2013-06-10T02:27:42.047 に答える