Bootstrap 动态创建元素后无法折叠

Question

在动态生成的 HTML 页面上使用 Bootstrap "collapse" 功能有困难。我查看了 this link（以及许多其他内容），但没有任何效果。

我是运行一个页面，在页面加载时通过 AJAX/webservice 调用获取数据。

然后，我基本上使用 -

从 jQuery 绘制 UI

$('someSelector').append($('<div/>',{'class':'someClass'}).append(more things)

HTML 呈现完美。这是无法正常工作的合拢功能。

我有一个按钮，单击它时应该 collapse/expand 一个 div。按钮和 div 都是通过 jQuery.

动态生成的

页面加载后，虽然标记准确，但折叠功能不起作用。将事件侦听器添加到动态创建的按钮并简单地运行 a show/hide 也不起作用。（不过，它确实适用于不是通过 jQuery 创建的元素 - 但这对我没有帮助）。 :( 我已经与硬编码 HTML（有效）进行了比较，并假设它与 jQuery/Bootstrap 需要重新初始化的事实有关？

我的主要想法是我需要重新初始化jQuery/Bootstrap，但我不知道该怎么做。 :/

如有任何帮助，我们将不胜感激！我已经在这上面花了太多时间了。谢谢！！！

这是我得到的 jQuery 以及 jQuery 完成附加所有内容后呈现的标记：

// I'm calling this function at the end of the dynamically created HTML
// I was hoping it would "brute-force" show the div I want to go.
// Didn't work though :(

function createExpandDetailsBtnListener() {
    var detailsBtns = document.getElementsByClassName("requests-item_btn");

    for (var i = 0; i < detailsBtns.length; i++) {
        detailsBtns[i].addEventListener("click", function (e) {
            var $_target = $(e.currentTarget);

            var trgt = e.target.getAttribute("data-target"); //return #default-item-detail_1
            $(trgt).show();

            //var $_div = $_target.find(".collapse");
            //if ($_div) {
            //    $_div.collapse('toggle');
            //}
            }
            , false);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ul>
<li class="requests-item requests-item-css requests-item-Submitted requests-item-687">
 <div class="requests-item-summary requests-item-summary_687">
  <div class="requests-item-column requests-item-column_requestId">
   <div class="requests-item_value partialSubmit">M687</div>
   <div class="requests-item_key">Request #</div>
  </div>
  <div class="requests-item-column requests-item-column_description">
   <div class="requests-item_value partialSubmit">sdfs sdfs</div>
   <div class="requests-item_key">Description</div>
  </div>
  <div class="requests-item-column requests-item-column_status">
   <div class="requests-item_value partialSubmit">Submitted</div>
   <div class="requests-item_key">Status</div>
  </div>
  <div class="requests-item-column requests-item-column_btn">
   <button class="btn requests-item_btn" type="button" data-toggle="collapse" data-target="#requests-item-detail_687">
    <span class="glyphicon glyphicon-chevron-down"></span>
   </button>
  </div>
 </div>
 <div id="requests-item-detail_687" class="collapse">
  <div class="requests-item_detail">
   <div class="request-detail">
    <div class="request-detail_contents">
     <ul class="request-detail_tabs">
      <li class="request-detail-tab">
       <span class="request-detail-tab_title">Request Details</span>
      </li>
     </ul>
    </div>
   </div>
  </div>
 </div>
</li>
</ul>

Answer 1

想出了 "workaround"/答案。

jQuery 没有通过 ID 识别元素，所以我从按钮中搜索了 dom。（.parent()s 和.siblings 等的组合）这可能不是最好的方法，但它对我有用。

这为我解决了 div 正确 collapse/expand 的问题。 :) 发布答案以防其他人遇到类似问题，因为我花了很多时间 it/was 感到沮丧！

Answer 2

解决了类似的问题：

$(document).on("click", '.collapse-class-name', function() {
    // $(this).next().collapse('toggle');
});

Bootstrap 动态创建元素后无法折叠

Bootstrap Collapse not working after dynamically created elements

jquery

ajax

twitter-bootstrap

collapse

dynamically-generated