Bootstrap Collapse не работает после динамически созданных элементов - PullRequest
Новая
       16

Bootstrap Collapse не работает после динамически созданных элементов

0 голосов
/ 24 августа 2018

возникли проблемы с функцией "коллапса" Bootstrap на динамически генерируемой HTML-странице.Я посмотрел на эту ссылку (среди многих других), но ничего не работает.

Я запускаю страницу, на которой данные загружаются при загрузке страницы через вызовы AJAX / webservice.

Затем я рисую пользовательский интерфейс из jQuery, используя по существу -

$('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>

Ответы [ 2 ]

0 голосов
/ 01 февраля 2019

Решена похожая проблема с: 

$(document).on("click", '.collapse-class-name', function() {
    // $(this).next().collapse('toggle');
});
0 голосов
/ 26 августа 2018

Понял "обходной путь" /answer.

JQuery не идентифицировал элемент по ID, поэтому я искал dom с помощью кнопки.(Комбинация .parent () s и .siblings и т. Д.) Возможно, это не лучший метод, но он сработал для меня.

Это позволило мне решить проблему с точки зрения правильного сворачивания div/ развернуть.:) Публикация ответа на случай, если кто-то столкнется с подобной проблемой, потому что я потратил на него столько времени / был разочарован!

...