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

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

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

Возможно, кто подскажет, что я не так делаю
по нажатию на кнопку динамически добавляю на страницу чекбокс и поле 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

<!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

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

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

@Estarriol · 23.05.2016, 17:51

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

@Padonak Философ-разговорник 1066 / 391 / 120 Регистрация: 20.02.2016 Сообщений: 884 Записей в блоге: 1
	16.05.2016, 21:35	10
	Сообщение от astartes При клике на чекбокс срабатывает как надо, но при этом после ввода текста в один инпут и при попытке перехода в другой, тестовое сообщение возникает вновь Opera, FF, Safari, IE, Yandex, Chrome - ни в одном из перечисленных браузеров у меня не наблюдается явление, описанное вами. Алерт вызывается либо на установку галки в чекбокс, либо на ее снятие - т.е. на onchange. Может быть у меня браузеры кривые, не знаю... Описание того, что происходит, можно получить в первоисточнике .on() (*Direct and delegated events*) 0

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

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

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

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

@Padonak Философ-разговорник 1066 / 391 / 120 Регистрация: 20.02.2016 Сообщений: 884 Записей в блоге: 1
	16.05.2016, 13:48	8
	Сообщение от astartes непонятная ситуация А вы мой код пробовали-то запускать? 0

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

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

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

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