Javascript 击倒导致手风琴功能失调

我得到了这个jquery手风琴代码：

 $(function () {
    var icons = {
        header: "ui-icon-circle-arrow-e",
        activeHeader: "ui-icon-circle-arrow-s"
    };
    $("#accordion")
      .accordion({
          header: "> div > h3",
          collapsible: true,
          active: false,
          heightStyle: "content",
          icons: icons
      })
      .sortable({
          axis: "y",
          handle: "h3",
          stop: function (event, ui) {
              var items = [];
              ui.item.siblings().andSelf().each(function () {
                  //compare data('index') and the real index
                  if ($(this).data('index') != $(this).index()) {
                      items.push(this.id);
                  }
              });
              // IE doesn't register the blur when sorting
              // so trigger focusout handlers to remove .ui-state-focus
              ui.item.children("h3").triggerHandler("focusout");
              ui.item.parent().trigger('stop');
          }
      })
    .on('stop', function () {
        $(this).siblings().andSelf().each(function (i) {
            //kjører for alle "childs" i accordian...
            $(this).data('index', i);
        });
    })
    .trigger('stop');
});

这适用于静态HTML，如下所示：

<div id="accordion">
    <div id ="Scene 1" class="group">
        <h3><b>#1: Task no 1</b></h3>
        <div>
             <textarea > Description of first task </textarea>
        </div>
    <div id ="Scene 2" class="group">
        <h3><b>#2: Task no 2/b></h3>
        <div>
            <textarea> Decription of task</textarea>
        </div>
    </div>
</div>

#1：任务1
第一项任务的说明
#2：任务编号2/b>
任务描述

但是在使用knockout使HTML动态化之后，当单击标题时，手风琴不再展开（或折叠）

以下是淘汰/动态HTML：

<div id="accordion" data-bind="foreach: Tasks">
    <div data-bind="attr : {'id': 'Task' + TaskId}" class="group">
        <h3><b>#<span data-bind="text: TaskId"></span>: <span data-bind="text: Taskname"></span></b></h3>
        <div>
             <textarea data-bind="value: Description"></textarea>  
        </div>
    </div>
</div>

#: 

---

有人能看到问题出在哪里吗？

浏览器开发控制台中是否有错误？所以在Chrome中，你需要按F12键（我想），或者如果你像我一样使用Firefox，安装FireBug，然后在网页上按F12键

• Chrome开发 控制台：
• 萤火虫：

---

这些工具肯定会帮助您调试Javascript错误。我看不出你的语法有什么错误。

我是从淘汰赛论坛上得到的，所以除了zew，我没有什么功劳了

他写道： 如果它与渲染相关，那么使用setTimeout进行简单测试应该会有所帮助……我已经编辑了你的小提琴 "

基本上，zew只是将TimeOut功能放在手风琴功能周围，如下所示：

 $(function () {

 setTimeout( function() {
    $("#accordion")
      .accordion({
          header: "> div > h3"
          ,collapsible: true
          ,active: false
          ,heightStyle: "content"
      })
      .sortable({
          axis: "y",
          handle: "h3",
          stop: function (event, ui) {
              var items = [];
              ui.item.siblings().andSelf().each(function () {
                  //compare data('index') and the real index
                  if ($(this).data('index') != $(this).index()) {
                      items.push(this.id);
                  }
              });
              // IE doesn't register the blur when sorting
              // so trigger focusout handlers to remove .ui-state-focus
              ui.item.children("h3").triggerHandler("focusout");
              // Now, print out the order of the accordion...
              if (items.length) $("#sekvens").text(items.join(','));
              ui.item.parent().trigger('stop');
          }
      })
      .on('stop', function () {
        $(this).siblings().andSelf().each(function (i) {
            $(this).data('index', i);
        });
     })
     .trigger('stop');
 }, 1000);
});

setTimeout实际上解决了这个问题。 一定是由于DNN以某种方式延迟渲染（？） 无论如何，JSFIDLE中的代码修复了DNN中的问题。 （注意：我已将DNN升级到7.1.1版。该版本运行jQuery-1.9.1和jQuery-UI-1.10.3）

---

谢谢大家的帮助！！！！：好主意。我得到这个：“TypeError:a是未定义的”。。。也许是因为DNN（我在Dotnetnuke框架中运行）？发生的另一件奇怪的事情是我的手风琴图标在。。。显然，由于DNN，因为它在fiddler中工作良好…我没有任何DNN的经验，所以我无法评论这是否是问题所在。如果要排除数据绑定问题，请从静态html示例中取出#accordio的内容并用scene2 div替换它（scene1 div缺少一个结束div）。我还想知道

Taskname

是否应该符合您的命名约定？再次感谢用户985351！：）该错误是由于为每个数据绑定指定了。data bind=“foreach:Tasks”删除此选项会导致展开/折叠工作。但是它并没有解决我的问题…@AsleG-如何设置绑定的数据？为此编写一些代码可能会有所帮助。绑定实际上是有效的。它列出了我的项目。我是这样做的：我太快了。setTimeout（）-使我的数据第一次呈现（页面加载后）。My Tasks（）通过ko.subscription更新。如果值被更新，则手风琴会展开所有数据并再次停止工作……当您说“停止工作”时，您的意思是值不更新吗？如果是这样，任务中的属性必须是可观察的。例如，

TaskId=ko.observable（）

值会更新，但手风琴不再可排序，第一个项目会展开，只有在我选择另一个项目时才会折叠。最后有一个虚拟行，只显示一个箭头和一条线。