将手风琴组动态添加到Twitter Bootstrap手风琴并不会被手风琴识别

时间:2013-06-24 19:32:54

标签: jquery twitter-bootstrap

在我目前的项目中,我有许多标签,每个标签都显示不同的手风琴,其中包含潜在客户通过网络发出的请求。每个选项卡代表一个工作流阶段在第一个标签中我有一个手风琴,一旦一个请求(手风琴组)被用户“声明”,它就从它的当前手风琴中移除并附加到下一个标签中的手风琴。此功能正常。我遇到的问题是新的父母手风琴似乎没有认识到增加了一个新的手风琴组,所以我能够独立于手风琴中的其他手风琴组扩展手风琴组。如果我扩展其中一个,它会崩溃,但如果我将其扩展回来,那些已经扩展的其他人就不会像他们应该那样崩溃。刷新页面时会出现此问题,但我正在努力避免这种情况。

所有手风琴组都正确设置了数据父级。我甚至在我正在移动的手风琴组上更改数据父级的值,这样它也是正确的。

感谢您的帮助:)

添加用户声明请求时调用的代码

define(['jquery', 'util', 'text!../templates/alert.html!strip', 'models/Claimer', 'models/RateQuote'], function($, util, tAlert) {
  return {
    /**
     * Claim an unclaimed request.
     *
     * @param row The request row.
     * @param id The request ID.
     * @param name The user's name who is claiming the request.
     * @param newActions Array of actions to replace the existing actions menu.
     */
    claim: function(row, id, name, newActions) {
      var claimer = new Claimer(name);

      $.ajax({
        url: '/webrequests/request/claimRequest/' + id,
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(claimer),
        success: function(data) {
          if($(row).siblings().length == 0)
            util.noData(row.parent('.accordion'));

          $(row).children('.accordion-heading').children('.accordion-toggle').attr('data-parent', '#claimed-by-me-accordion');

          var claimedByMeAccordion = $('#claimed-by-me-accordion');
          $(claimedByMeAccordion).children('.no-data').remove();

          $(row).appendTo(claimedByMeAccordion);

          $('.createDate', row).html('No response sent').removeClass('createDate').addClass('respondDate');
          $('.actions', row).children().remove();
          $('.actions', row).append(newActions);
        }
      });
    },

1 个答案:

答案 0 :(得分:0)

Bootstrap会在加载时自动将DOM中的所有内容转换为适当的窗口小部件类型,但它不会侦听添加到DOM的新元素。为此,您需要在添加新行后手动指定新行是否可折叠。幸运的是,这应该很简单。尝试将.collapse()附加到appendTo,如下所示:

$(row).appendTo(claimedByMeAccordion).collapse();

另请参阅文档:http://twitter.github.io/bootstrap/javascript.html#collapse