Событие Click не работает с динамически генерируемыми элементами

@Boris272 · Регистрация: 16.12.2018

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

Вем привет. Хочу сделать выдвигающейся меню по кнопке, а в нутри его радио-кнопки. Таких блоков с выдвижным меню, я хочу создать несколько. Но при открытии второго или третьего блока, открывается 1. Выдвижное меню работает через JS. Помогите поправить.

JS:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$('.toggle').click(function(e) {
e.preventDefault();
 
var $this = $(this);
 
if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.next().slideUp(350);
} else {
$this.parent().parent().find('li .inner').removeClass('show');
$this.parent().parent().find('li .inner').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
}
});
 
$('.type_body_active').slideDown( "slow", function() {});
$('input[name=select]').click(function(){
$('.type_body_active').slideUp("slow", function() {});
$('.type_body_active').on('removeClass','type_body_active');
$(this).closest('.type').find('.type_body').addClass('type_body_active');
$('.type_body_active').slideDown( "slow", function() {});
$('.type #price').text('Select entry & days');
})
 
$('[name ^= days]').change(function(){
$(this).closest('.row').find('[name ^= entry]').prop('checked', true);
$('.type #price').text('$' + $(this).val());
})
 ﻿
$('[name ^= entry]').change(function(){
$('[name ^= days]').prop('checked', false);
$('#price').text('Select days');
})

///////////////////////
html:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<section class="type">
            <div class="type_title">
                <div class="left-cor">
                   <div class="row type_body_row">
                    <div class="radio-label">
                        <input type="radio" name="entry1" value="1" id="single1">
                        <label for="single1">Multiple entry</label>
                    </div>
                    <span>30 days</span>
                    <div class="radio-column">
                        <div class="radio-label">
                            <input type="radio" name="days1" value="510" id="tdays1">
                            <label for="tdays1">2 days</label>
                        </div>
                        <div class="radio-label">
                            <input type="radio" name="days1" value="400" id="fdays1">
                            <label for="fdays1">4 days</label>
                        </div>
                        <div class="radio-label">
                            <input type="radio" name="days1" value="280" id="twdays1">
                            <label for="twdays1">12 days</label>
                        </div>
                    </div>
                    <div class="col type_body_col">
                        <span>$510</span>
                        <span>$400</span>
                        <span>$280</span>
                    </div>
                </div>
                <br>
                <div class="row type_body_row" style="height: 123px;">
                    <span style="color: #b2181e; padding-left: 60px;"><b>4 business day processing selected</b> </span>
                    <span style=" padding-left: 60px;">Total price: </span>
                    <h3 id="price"><b>Select entry &amp; days</b></h3>
                    <button id="lab">CONTINUE</button>
                </div>
           </div>
        </div>
<section >

И таких 2

@svtslv · 17.02.2019, 01:44

Потому что вешать нужно на существующий элемент. А в самом событии определять где был клик на jquery

JavaScript
1
2
3
$(document).on('click', '#dynamic', function() {
    alert("Dynamic element click");
});

@Boris272 · 17.02.2019, 07:16 **[ТС]**

Не помогает. Может нужно новый id в html прописать?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$('.toggle').on('click', function(e) {
    e.preventDefault();
 
  var $this = $(this);
 
  if ($this.next().hasClass('show')) {
      $this.next().removeClass('show');
      $this.next().slideUp(350);
  } else {
      $this.parent().parent().find('li .inner').removeClass('show');
      $this.parent().parent().find('li .inner').slideUp(350);
      $this.next().toggleClass('show');
      $this.next().slideToggle(350);
  }
});
 
$('.type_body_active').on('slideDown', "slow", function() {});
$('input[name=select]').on('click', function(){
  $('.type_body_active').slideUp("slow", function() {});
  $('.type_body_active').on('removeClass','type_body_active');
  $(this).closest('.type').find('.type_body').addClass('type_body_active');
  $('.type_body_active').slideDown( "slow", function() {});
  $('.type #price').text('Select entry & days');
})
 
$('[name ^= days]').change(function(){
  $(this).closest('.row').find('[name ^= entry]').prop('checked', true);
  $('.type #price').text('$' + $(this).val());
})
 
$('[name ^= entry]').change(function(){
  $('[name ^= days]').prop('checked', false);
  $('#price').text('Select days');
})[JS]

[/JS]

Новые блоги и статьи Все статьи Все блоги /
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20%	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .