Динамическа в ставка спойлера на страницу

@rean1mator · Регистрация: 19.01.2011

Студворк — интернет-сервис помощи студентам

Здравствуйте!

Пытаюсь сделать следующее и что-то не получается:
Есть страница. На странице имеется кнопка, по нажатию на которую из определенного файла на страницу должен вставиться спойлер.
Сам процесс вставки уже работает и с ним всё хорошо. Проблема в том, что вставленный спойлер появляется на странице в уже раскрытом состоянии и на попытку свернуть его никак не реагирует.
JQuery код, управляющий сворачиванием/разворачиванием подключен на основной странице изначально.

Когда HTML этого спойлера изначально находится на странице, тогда всё работает, как часики, а вот когда HTML спойлера вставляется из файла вьюшки по нажатию кнопки, вот тут и начинаются проблемы

Подскажите пожалуйста, как сделать так, чтоб вставляемый по нажатию кнопки спойлер таки начал отзываться на клики по нему. Благодарю всех, кто отзовется помочь

@Lazy_Den · 12.10.2014, 13:22

rean1mator, Метод on() и делегированная обработка событий. Схематически:

JavaScript
1
2
3
$('static_parent').on('event', 'dynamic_child', function(){
    
});

static_parent - селектор ближайшего статичного родительского элемента
dynamic_child - селектор динамически добавленного элемента
event - событие

Добавлено через 4 минуты
P.S. Сделал акцент на ближайшем родителе, т.к. это увеличивает скорость работы сценария. Хотя, в некоторых случаях, можно использовать любой: и body, и даже document

@rean1mator · 12.10.2014, 14:54 **[ТС]**

Спасибо!

Попробуем так

Добавлено через 47 минут
Что-то не хочет работать

Вот JS-код:

JavaScript
1
2
3
4
5
6
$(document).ready(function () {
    $('.total_bill_spoiler-text_wrapper').hide();
    $('#address_total_bill_wrapper').on('click', this, function () {
        $(this).toggleClass("folded").toggleClass("unfolded").next().slideToggle()
});
});

.total_bill_spoiler-text_wrapper - текстовый блок спойлера.
#address_total_bill_wrapper - родительский блок для вставляемого спойлера. Этот блок изначально присутствует на основной странице.

HTML-код спойлера:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="total_bill_spoiler-wrapper">
            <div class="total_bill_spoiler unfolded"><a href="#" class="org_srv_name_palce">Ноазвание спойлера</a><span class="org_srv_total_accrued_place">Доп.текст</span></div>
            <div class="total_bill_spoiler-text_wrapper">
                <ul class="total_bill_spoiler_ul">
                    <li class="total_bill_spoiler_li notselected_li"><span class="total_bill_spoiler_appart_num">Произвольный текст</span> <span class="total_bill_spoiler_appart_biils">130.24</span></li>
                    <li class="total_bill_spoiler_li notselected_li"><span class="total_bill_spoiler_appart_num">Произвольный текст</span> <span class="total_bill_spoiler_appart_biils">130.24</span></li>
                    <li class="total_bill_spoiler_li notselected_li"><span class="total_bill_spoiler_appart_num">Произвольный текст</span> <span class="total_bill_spoiler_appart_biils">130232.24</span></li>
                    <li class="total_bill_spoiler_li notselected_li"><span class="total_bill_spoiler_appart_num">Произвольный текст</span> <span class="total_bill_spoiler_appart_biils">130.24</span></li>
                    <li class="total_bill_spoiler_li notselected_li"><span class="total_bill_spoiler_appart_num">Произвольный текст</span> <span class="total_bill_spoiler_appart_biils">130.24</span></li>
                </ul>
            </div>
        </div>

P.S. Добиться работоспособности получается только если JS-код управления спойлером будет прилетать на страницу вместе с самим спойлером. Но такой вариант создает "кашу" кода на странице, которой хотелось бы избежать

@Lazy_Den · 12.10.2014, 15:01

У вас динамически добавляется именно ".total_bill_spoiler-text_wrapper"? Тогда так:

JavaScript
1
2
3
4
5
6
$(document).ready(function () {
    $('.total_bill_spoiler-text_wrapper').hide(); // а вот эту строку поместить сразу после добавления спойлера на страницу
    $('#address_total_bill_wrapper').on('click', '.total_bill_spoiler-text_wrapper', function () {
        $(this).toggleClass("folded").toggleClass("unfolded").next().slideToggle()
    });
});

@rean1mator · 12.10.2014, 15:07 **[ТС]**

Сообщение от Lazy_Den

У вас динамически добавляется именно ".total_bill_spoiler-text_wrapper"?

Нет. прилетает блок ".total_bill_spoiler-wrapper", как приведенном выше HTML

Вот какой код сейчас отрабатывает почти полностью, кроме того, что не отрабатывает hide():

JavaScript
1
2
3
4
5
6
7
    $(document).ready(function () {
    $('.total_bill_spoiler-text_wrapper').hide();
    $('#address_total_bill_wrapper').on('click', '.total_bill_spoiler', function () {
        alert('11');
        $(this).toggleClass("folded").toggleClass("unfolded").next().slideToggle()
    });
});

@Lazy_Den · 12.10.2014, 15:20

rean1mator, я старенький, слегка туговат и меня пугают названия классов, длина которых с маленький томик "Война и Мир"

Поэтому я набросал вам простой примерчик. Новый спойлер в примере, добавлятся не из файла, как у вас, а из заранее подготовленной переменной, но это роли не играет. Посмотрите схему и попробуйте перенести её на свой проект.

@rean1mator · 12.10.2014, 15:24 **[ТС]**

Lazy_Den, спасибо за разъяснения

Теперь всё работает

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@rean1mator 84 / 84 / 1 Регистрация: 19.01.2011 Сообщений: 442

	Динамическа в ставка спойлера на страницу 12.10.2014, 13:12. Показов 1232. Ответов 6 Метки динамическая вставка спойлера (Все метки) Здравствуйте! Пытаюсь сделать следующее и что-то не получается: Есть страница. На странице имеется кнопка, по нажатию на которую из определенного файла на страницу должен вставиться спойлер. Сам процесс вставки уже работает и с ним всё хорошо. Проблема в том, что вставленный спойлер появляется на странице в уже раскрытом состоянии и на попытку свернуть его никак не реагирует. JQuery код, управляющий сворачиванием/разворачиванием подключен на основной странице изначально. Когда HTML этого спойлера изначально находится на странице, тогда всё работает, как часики, а вот когда HTML спойлера вставляется из файла вьюшки по нажатию кнопки, вот тут и начинаются проблемы Подскажите пожалуйста, как сделать так, чтоб вставляемый по нажатию кнопки спойлер таки начал отзываться на клики по нему. Благодарю всех, кто отзовется помочь 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	12.10.2014, 15:20
	rean1mator, я старенький, слегка туговат и меня пугают названия классов, длина которых с маленький томик "Война и Мир" Поэтому я набросал вам простой примерчик. Новый спойлер в примере, добавлятся не из файла, как у вас, а из заранее подготовленной переменной, но это роли не играет. Посмотрите схему и попробуйте перенести её на свой проект. 1

@rean1mator 84 / 84 / 1 Регистрация: 19.01.2011 Сообщений: 442
	12.10.2014, 15:24 [ТС]
	Lazy_Den, спасибо за разъяснения Теперь всё работает 0

Динамическа в ставка спойлера на страницу

Решение