jquery - Bootstrap Collapse 在动态创建元素后不起作用

Question

在动态生成的 HTML 页面上使用 Bootstrap“折叠”功能有困难。我看了this link (在许多其他人中)，但没有任何效果。

我正在运行一个页面，其中通过 AJAX/网络服务调用在页面加载时获取数据。

然后，我基本上使用 -

从 jQuery 绘制 UI

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

HTML 呈现完美。折叠功能无法正常工作。

我有一个按钮，单击该按钮时应该折叠/展开一个 div。按钮和 div 都是通过 jQuery 动态生成的。

页面加载后，虽然标记准确，但折叠功能不起作用。将事件监听器添加到动态创建的按钮并简单地运行显示/隐藏也不起作用。 (不过，它确实适用于不是通过 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

解决了类似的问题:

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