Не срабатывает событие 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

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .

@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