Question

更新： 我正在动态创建JQuery手风琴，它由ajax数据填充。在左侧栏上正确创建了手风琴：

当创建新唱片时，它已添加到手风琴数据中，但它会打扰我的手风琴，您可以在左侧栏中看到下图：

当我刷新页面时，每个东西看起来都很像第一张图片。我的要求是不刷新页面并使手风琴工作。注意：我在手风琴调用的地方放了一些警报，警报显示的次数超过三次。我怎么能限制这个电话？如果我可以限制此呼叫，那么我的问题将得到解决！或者建议我将div与on load function / event绑定，以便它可以相应地运行到binned函数
我也经历了这两个问题Q1，Q2，但它并没有帮助我！

以下是代码：

$.ajax({
        url: "/categories",
        type: 'GET',
        success: function(data) {
          var content = "";

          for (i = 0; i < data.length; i++) {

            content += '<label class="categoryLables" id="">' + data[i].title + '</label>';

            content += '<div>';
            content += '<div>';
            content += '<ul>';

            for (j = 0; j < data[i].boards.length; j++) {

              content += '<li>';
              content += "<a href='/#categories/" + data[i].id + "/boards/" + data[i].boards[j].id + "'>";



              content += data[i].boards[j].name;
              content += '</a>';
              content += '</li>';
            }

            content += '</ul>';
            content += '</div>';
            content += '</div>';

          }

          alert("1");
          $("#category-navigation").html(content);
          alert("2");
          $('#category-navigation').accordion({
            heightStyle: "content",
            active: false,
            collapsible: true
          });
         alert("3");
        }
      });

> HTML:

<div class="myNavigation">

  <div id="category-navigation">


  </div>

</div>

Answer 1

当你在一个特定元素上调用jQuery Accordion时，它的工作原理是将某些类添加到父元素，然后添加相应的子元素以执行手风琴功能;这已在jQuery中定义。

由于您的数据是动态的并且是由ajax请求加载的，因此可能会出现比加载数据时过早调用accordion函数的情况，因此它无法将适当的类应用于相应的元素。

因此，要解决此问题，您需要稍微更改一下代码：

从 HTML

删除 <div id="category-navigation">

<div class="myNavigation">
   <div id="category-navigation"> <!-- remove this div only --> 
   </div>
</div>

并通过jQuery动态生成它，因为您已经在使用其余的代码。

content += '<div id="category-navigation">'
for (i = 0; i < data.length; i++) {
...
...
...
}
content += '</div>';

另外，设置 myNavigation 的HTML而不是 #category-navigation 。这样做：

$(".myNavigation").html(content);

现在，当您申请$('#category-navigation').accordion时，它会在动态数据填充后调用。

JQuery Accordion没有通过ajax

1 个答案: