Не срабатывает событие change на созданных элементах

@astartes · Регистрация: 16.06.2015

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

Возможно, кто подскажет, что я не так делаю
по нажатию на кнопку динамически добавляю на страницу чекбокс и поле input

JavaScript
1
2
$('.new-task').click(function() {
$('<div><input class="check' + elementsCounter + '" type="checkbox"><input class="user-note' + elementsCounter + '" type="text" placeholder="Enter your notes here..."></div>').appendTo('.content');

После того, как элементы добавлены на страницу, хочу вызвать обработку при событие change у чекбокса

JavaScript
1
2
3
$('input:checkbox').change(function() {
     alert('yep');
});

Но в результате ничего не происходит. Выяснил, что если создать чекбокс и инпут вручную, то все начинает работать.
Также после создания новых элементов, я могу выбрать их и удалить(то есть манипуляции элементами в DOM происходят)

@Padonak · 14.05.2016, 21:25

JavaScript
1
2
3
$('input:checkbox').on('change', function(){
     alert('yep');
});

@astartes · 14.05.2016, 21:29 **[ТС]**

не, все равно не хочет работать

@Padonak · 14.05.2016, 22:01

PHP/HTML
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
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>123</title>
<style>
[value="ADD"]{
position:fixed;
top:30px;
right:30px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$('body').on('change', '[class^="check"]', function(){
     alert('yep');
});
 
$('[value="ADD"]').click(function(){
var len=$('[class^="check"]').length;
$('body').append('<div><input class="check' + len + '" type="checkbox"><input class="user-note' + len + '" type="text" placeholder="Enter your notes here..."></div>')
});
 
var i = 0;
while(i < 5){
$('body').append('<div><input class="check' + i + '" type="checkbox"><input class="user-note' + i + '" type="text" placeholder="Enter your notes here..."></div>')
i++;
}
});
</script>
</head>
<body>
<input type="button" value="ADD" />
</body>
</html>

@astartes · 14.05.2016, 22:29 **[ТС]**

Насколько я смог понять, главное отличие в вашем коде, это объявление события для body
Так работает, да. Но при таком варианте, что на странице не тыкни, все время срабатывает body.change

@Padonak · 15.05.2016, 11:14

Ну извините, раз не угодил

@astartes · 15.05.2016, 14:41 **[ТС]**

да нет, за содействие спасибо!
просто непонятная ситуация. Элементы в DOM создаются, но чекбоксы не хотят реагировать

@Padonak · 16.05.2016, 13:48

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

непонятная ситуация

А вы мой код пробовали-то запускать?

@astartes · 16.05.2016, 18:56 **[ТС]**

запустил. При клике на чекбокс срабатывает как надо, но при этом после ввода текста в один инпут и при попытке перехода в другой, тестовое сообщение возникает вновь
Если в вашем коде кроется ответ, то просил бы озвучить его, так как для меня сия ситуация загадка

@Padonak · 16.05.2016, 21:35

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

При клике на чекбокс срабатывает как надо, но при этом после ввода текста в один инпут и при попытке перехода в другой, тестовое сообщение возникает вновь

Opera, FF, Safari, IE, Yandex, Chrome - ни в одном из перечисленных браузеров у меня не наблюдается явление, описанное вами. Алерт вызывается либо на установку галки в чекбокс, либо на ее снятие - т.е. на onchange. Может быть у меня браузеры кривые, не знаю...

Описание того, что происходит, можно получить в первоисточнике .on() (Direct and delegated events)

@astartes · 19.05.2016, 11:00 **[ТС]**

Да, работает, как надо. По всей видимости я неправильно свой код модифицировал с учетом вашего.
Про непонятно, что происходит я имел ввиду, почему мой вариант не срабатывает. Причем в других местах, я его активно использовал(если вдруг это некий устаревший метод).

@muxahuk1214 · 20.05.2016, 08:06

Проблема вашего кода в том, что .change срабатывает только с уже заданной структурой DOM ( т.е. если через секунду после срабатывания .change появиться новый элемент в DOM то .change на нём никогда не сработает ), так уж устроен он..
в свою очередь .on ( или .bind и подобные ) будут срабатывать на появившихся позже DOM элементах.

Единственное что, возможно придётся писать .on так, что бы как минимум 1-н элемент был в DOM изначально:

JavaScript
1
$(document).on( 'change', 'input[type="checkbox"]', function() {...} );

Т.к. если не будет элемента идущего до .on то .on никогда не сработает.

@astartes · 22.05.2016, 21:22 **[ТС]**

В итоге не работают и конструкции следующего вида

JavaScript
1
2
3
$('input').on('change', function() {
    alert('yep');
  })

А предложенная конструкция работает и с имеющимися элементами и с вновь созданными(даже если изначально элементов на странице нет, то после их создания все работает):

JavaScript
1
2
3
 $('body').on('change', 'input[type=checkbox]', function() {
    alert('yep');
  })

Получается, если обращаемся к input хоть через input.change, хоть через input.on(change) - не работает, то есть jquery их не видит. А если ставим событие на body, то все отрабатывает. Занятно получается

@Estarriol · 23.05.2016, 13:38

Дабы тем не плодить задам вопрос здесь, благо он похожий..
Динамически добавляю в форму три select'a и инпут текст, вопросов собственно несколько, но глобальный - один:

Два селекта должны быть взаимосвязанными, значения второго берутся из бд в зависимости от выбранного значения в первом, как это сделать когда они в единственном экземпляре вопросов не вызывает, а когда их несколько - сижу и не понимаю как обратится то к ним?

@muxahuk1214 · 23.05.2016, 17:38

Если вопрос заключается какой мне селектр использовать, то вам стоит подучить css и jquery

JavaScript
1
2
3
$('.select1').on( 'change', function() {
    var $select2 = $(this).parents( '.parent' ).find( '.select2' ); // Что бы выбрать нужный селект - через родителя или next() или ещё что выходим на нужный блок в вёрстке.. 
} );

Можно так же генирировать им какие-нибудь уникальные дата данные и искать в зависимости от них..

HTML5
1
2
<select data-uid="1"></select>
<select data-uid="1"></select>

JavaScript
1
2
3
4
$('.select1').on( 'change', function() {
    var uid = $(this).data('uid');
    var $select2 = $( '.select2[data-uid="' + uid + '"]' );
} );

Если вопрос не в этом, то следует разъясняться более чётко.

@Estarriol · 23.05.2016, 17:51

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

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@astartes 7 / 7 / 4 Регистрация: 16.06.2015 Сообщений: 63
	14.05.2016, 21:29 [ТС]
	не, все равно не хочет работать 0

@astartes 7 / 7 / 4 Регистрация: 16.06.2015 Сообщений: 63
	14.05.2016, 22:29 [ТС]
	Насколько я смог понять, главное отличие в вашем коде, это объявление события для body Так работает, да. Но при таком варианте, что на странице не тыкни, все время срабатывает body.change 0

@Padonak Философ-разговорник 1066 / 391 / 120 Регистрация: 20.02.2016 Сообщений: 884 Записей в блоге: 1
	15.05.2016, 11:14
	Ну извините, раз не угодил 0

@astartes 7 / 7 / 4 Регистрация: 16.06.2015 Сообщений: 63
	15.05.2016, 14:41 [ТС]
	да нет, за содействие спасибо! просто непонятная ситуация. Элементы в DOM создаются, но чекбоксы не хотят реагировать 0

@astartes 7 / 7 / 4 Регистрация: 16.06.2015 Сообщений: 63
	16.05.2016, 18:56 [ТС]
	запустил. При клике на чекбокс срабатывает как надо, но при этом после ввода текста в один инпут и при попытке перехода в другой, тестовое сообщение возникает вновь Если в вашем коде кроется ответ, то просил бы озвучить его, так как для меня сия ситуация загадка 0

@astartes 7 / 7 / 4 Регистрация: 16.06.2015 Сообщений: 63
	19.05.2016, 11:00 [ТС]
	Да, работает, как надо. По всей видимости я неправильно свой код модифицировал с учетом вашего. Про непонятно, что происходит я имел ввиду, почему мой вариант не срабатывает. Причем в других местах, я его активно использовал(если вдруг это некий устаревший метод). 0

@Estarriol 0 / 0 / 0 Регистрация: 30.03.2016 Сообщений: 14
	23.05.2016, 13:38
	Дабы тем не плодить задам вопрос здесь, благо он похожий.. Динамически добавляю в форму три select'a и инпут текст, вопросов собственно несколько, но глобальный - один: Два селекта должны быть взаимосвязанными, значения второго берутся из бд в зависимости от выбранного значения в первом, как это сделать когда они в единственном экземпляре вопросов не вызывает, а когда их несколько - сижу и не понимаю как обратится то к ним? 0

@Estarriol 0 / 0 / 0 Регистрация: 30.03.2016 Сообщений: 14
	23.05.2016, 17:51
	Благодарю за подробный ответ, чет я затупил, видимо и впрямь с селекторами не всегда хорошо... 0