Question

在动态生成的HTML页面上使用Bootstrap“折叠”功能有困难。我看着this link（还有许多其他事物），但是没有任何效果。

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

然后，我实质上是使用jQuery绘制UI-

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

HTML呈现完美。收合功能无法正常工作。

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

页面加载后，尽管标记准确无误，但“折叠”功能不起作用。将事件侦听器添加到动态创建的按钮并仅运行显示/隐藏也不起作用。（尽管如此，它在不是通过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

找出了“解决方法” /答案。

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

这对我来说可以解决div正确折叠/展开的问题。 :)发布答案，以防其他人遇到类似问题，因为我花了太多时间/感到沮丧！

Answer 2

解决了以下类似问题：

FALSE

在动态创建元素后，Bootstrap折叠不起作用

2 个答案: