jquery - обработка динамически добавленных элементов

#1 28 декабря 2014 в 16:21
Всем привет и всех с наступающим Новым Годом!!!)

Вопрос к знатокам Jquery:
есть такой скрипт
  1.  
  2. var MaxInputs = 30; //максимальное количство для добавления
  3. var Wrap = $("#video_fields"); //родительский элемент полей
  4. var AddButton = $("#INeedMore"); //Кнопка добавить поле
  5. var x = Wrap.length; //подсчет количества полей
  6. var FieldCount=1; //добавляем каждому полю + 1
  7. $(AddButton).click(function (e) //функция добавления нового поля
  8. {
  9. if(x <= MaxInputs) //проверяем на максимальное кол-во
  10. {
  11. FieldCount++;
  12. //добавляем поле
  13. $(Wrap).append('<div><input class="video" style="width:90%" type="text" name="video[]" id="video_'+ FieldCount +'" onkeyup="this.value=this.value.replace(\' \',\'\')" value=""/><a href="#" class="removeclass">&times;</a></div>');
  14. x++; //приращение текстового поля
  15. }
  16. return false;
  17. });
  18. $("body").on("click",".removeclass", function(e){ //удаление поля
  19. if( x > 1 ) {
  20. $(this).parent('div').remove(); //удалить блок с полем
  21. x--; //уменьшаем номер текстового поля
  22. }
  23. return false;
  24. });
  25.  
  26.  
Скрипт динамически добавляет новые инпуты в форму. Все работает как нужно.
Вопрос заключается в том, что после добавления я пытаюсь сделать это
  1.  
  2. $('#video_fields input#video_'+FieldCount+'').on('blur',function(e){
  3. alert("done");
  4. });
  5. $('#video_fields').blur();
  6.  
то есть вывести сообщение "done" после того как фокус инпута пропадает.
Но это работает только для первого элемента. Для динамически добавленных нет. Почему?

P.S. js только изучать начал
#2 28 декабря 2014 в 16:40
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()

(сокращенный перевод: только для существующих на данный момент элементов)

Нужен delegate()
#3 28 декабря 2014 в 16:52

(сокращенный перевод: только для существующих на данный момент элементов)

• Mike •

То есть on работает только с теми элементами, которые были загружены вместе со страницей? Динамически добавленные он не видит?
#4 28 декабря 2014 в 17:14
Да. Вторая часть предложения, как раз об этом — они должны существовать на странице до вызова on()

Делегирование единственно возможно для элементов «пришельцев из будущего»
#5 28 декабря 2014 в 18:19
Попробуйте каждому инпуту присвоить id="s"+x и потом обращайтесь к инпутам
$('#s0') .....
$('#s1')…
и так далее.
#6 28 декабря 2014 в 19:07
Странник, дело в том, что число добавляемых элементов неизвестно, и по идее оно может быть и 100 и 1000
у меня получилось все это сделать при помощи ON, только немного изменил.
Это не работало:
  1.  
  2. $('#video_fields input#video_'+FieldCount+'').on('blur',function(e){
  3. alert("done");
  4. });
  5.  
Это работает:
  1.  
  2. $('#video_fields).on('blur', 'input' ,function(e){
  3. alert("done");
  4. });
  5.  
Не знаю на сколько это правильно, но пока работает как надо. Если я правильно понимаю, то on в данном случае срабатывает именно на нужном элементе, или нет?
#7 28 декабря 2014 в 19:10
У меня еще такой вопрос.
Есть допустим ссылка — site.com/103469704
Как при помощи регулярных выражений (или может быть есть другой способ) вырезать все до последнего слеша? То есть остаться должно 103469704

Как сделать это на php я знаю, а как на JS? Или принципиальной разницы нет?
#8 28 декабря 2014 в 20:55
  1. $(document).on('blur', '#video_fields input#video_'+FieldCount, function() {
  2. alert("done");
  3. });
--

Это работает:

Rossoman
невнимательно прочитал все ответы) да, смысл как раз в этом. В данном случае как раз включается делегирование, а котором писал Майк.
$(document) — с какого родителя начинать отслеживать все элементы, включая динамически добавленные. Как правило, круг сужают, т.е. в вашем случае логичней было бы сделать или как вы написали или, исходя из вашего примера
  1. $('#video_fields').on('blur', '#video_'+FieldCount, function(e) {
  2. alert("done");
  3. });
#9 29 декабря 2014 в 00:46
Fuze, а чем все таки будет отличаться ваш пример от моего? Или принципиальной разницы нет?

p.s. Повторюсь, что я новичок в JS)
#10 29 декабря 2014 в 01:21

Или принципиальной разницы нет?

Rossoman
принципиальной разницы нет. Возможно ваше решение самое оптимальное
  1. $('#video_fields').on('blur', 'input' ,function(e){
  2. alert("done");
  3. });
если других элементов input (для которых не нужно биндить событие blur) внутри #video_fields нет. А если есть, то просто объедините свои input-ы классом и
  1. $('#video_fields').on('blur', '.my_video_input_class' ,function(e){
  2. alert("done");
  3. });
#11 30 декабря 2014 в 11:29
И снова нужна ваша помощь))

Есть скрипт
  1.  
  2. $('#video_fields').on('change', 'input',function(e){
  3.  
  4.  
  5. if(document.getElementById("video_"+ x +"").value.length != 0){
  6. if(document.getElementById("video_"+ x +"").value.indexOf('youtu.be') >= 0){
  7. var code = document.getElementById("video_"+ x +"").value.replace("http://youtu.be/", "");
  8. var s = 'youtube';
  9. };
  10.  
  11. if (code.length == 11 && s == 'youtube') {
  12. $("p.warning_mess").remove();
  13. $("#image"+x+" img.img_you").remove();
  14. $('#image_'+x+'').append('<img class="img_you" src="http://img.youtube.com/vi/'+ code +'/0.jpg">');
  15. }
  16. }
  17. });
  18. $('#video_fields').change();
  19.  
он должен выводить картинку к видео с ютуба, а именно вот эта часть
  1. $('#image_'+x+'').append('<img class="img_you" src="http://img.youtube.com/vi/'+ code +'/0.jpg">');
Но он не работает.
Причем если эту строку заменить на
  1. $('#image_'+x+'').append('DONE');
То все работает.
Почему?) Почему вставляется текст и не вставляется картинка?

P.S. code — формируется правильно. Выводил через alert, код верный. Если сформированную ссылку на картинку вставить в браузер, то картинка отображается

Вставилась картинка, но только в том случае, если класс удалить…
#12 29 июля 2015 в 13:04

$('#image_'+x+'').append('<img class="img_you" src="http://img.youtube.com/vi/'+ code +'/0.jpg">');

Rossoman

я бы написал более лаконично: $('#image_'+x)......

и еще. откройте исходный код страницы (которая загружается в браузер).
посмотрите, какой именно код картинки jquery вставляет в код страницы.
сюда этот фрагмент
#13 29 июля 2015 в 13:07

Вставилась картинка, но только в том случае, если класс удалить...

Rossoman
а класс img_you в css случайно не содержит какой нибудь фигни вроде display: none, или подобной?
#14 29 июля 2015 в 13:35
Странник, спасибо конечно) Но проблему решил уже более полугода назад) Наверное… Даже не помню где у меня такое было...)
#15 29 июля 2015 в 13:49
Верно, я на дату поста не посмотрел)))
Нашел поиском, вбив "подсчет числа динамически добавляемых элементов". Еще и обрадовался, что на инстант попал. Вижу, у коллеги вопрос есть, а на него никто не ответил.
Моя задача вроде выглядит просто, а когда пишу
  1. var summa = $('.percent').length;
то считается количество элементов, которые были на странице ДО динамического добавления вроде
  1. $('#for_percent'+n).empty().append('<span class="percent">'+percent+'%</span>');
P.S. Справился
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.