Не работает скрипт для новых элементов?

Question

[Василий Петров]

Имеется элемент, после нажатия на который появляется дополнительный блок. Этих элементов много и подгружаются они через ajax (использовал плагин). Скрипт работает только на элементах которые изначально загружены на странице. Если я правильно понял, то скрипт просто не видит новые элементы... Как исправить?

Answer 1

[lemme]

learn.jquery.com/events/event-delegation

Comments

[Василий Петров]

Не особо понял, что это такое, но вроде это не то

[lemme]

Василий Петров: это именно то

Вот пример codepen.io/anon/pen/vxMBmW

[Василий Петров]

lemme:
Может я не так выразился и вы меня не поняли, ну или я туплю :D
Нажимаем на i.fa-bars и появляется .top_navigation. Если в базе имеется еще блок с i.fa-bars, то он подгружается, но скрипт его походу не видит, т.к. новый top_navigation не хочет появляться

$('.menu i.fa-bars').on('click',function(){
    $('.top_navigation').animate({width: 'show'}, 200);
    });

[lemme]

Василий Петров: codepen.io/anon/pen/vxMBmW еще раз скину ссылку с примером (строки element #1 и.т.д) кликабельны. Я могу, конечно, поправить код, но, в этом не будет смысла, если не понять как это работает.

[Олег]

Василий Петров:

$('.menu').on('click', 'i.fa-bars', function(){
    $('.top_navigation').animate({width: 'show'}, 200);
    });

[Василий Петров]

Олег: уже 2 раз написали) Спасибо конечно, но lemme прав — надо понять как работает эта магия

[lemme]

Олег: я его пытаюсь вразумить, даю ему примеры, что б он сам разобрался, а тут - готовый код :(

[Василий Петров]

lemme:

$('.one') .on('click', 'i.fa-info-circle', function(){
    var b = $(this).siblings('.fr');
    if($(this).hasClass('fa-info-circle')){
    $(b).animate({width: 'show'}, 200);
    $(this).removeClass('fa-info-circle').addClass('fa-info');
    }
    else{
    $(b).animate({width: 'hide'}, 200);
    $(this).removeClass('fa-info').addClass('fa-info-circle');
    }
    });

А почему здесь else не хочет выполняться?

[lemme]

Василий Петров:

// вешаем событие клик на .one
// обрабатываем клик по элементам i.fa-info-circle
$('.one') .on('click', 'i.fa-info-circle', function(){
	// бесполезное условие, так как клик по другим элементам не обрабатывается (всегда true)
  if ($(this).hasClass('fa-info-circle')) {
  	
  } 
  // Бесполезное условие - комментарий выше.  (всегда false)
  else {
  
  }
})

Варианта два, для этих блоков задать общий класс. Пусть, .fa-info-common и вешать обработчик именно на него.

on('click', 'i.fa-info-circle', function(){

Либо, перечислить классы через запятую, т.е

on('click', '.fa-info, .fa-info-circle, function(){

[Василий Петров]

lemme: Спасибо)

Answer 2

[Андрей Токмаков]

$('.menu').on('click', 'i.fa-bars', function(){
    $('.top_navigation').animate({width: 'show'}, 200);
    });

Comments

[Андрей Токмаков]

Если Вы хотите сами понять и разобрать - это даже хорошо. Попробую объяснить.
В Вашем коде обработчик вешается на конкретно на .menu i.fa-bars, соответственно при добавлении новых таких элементов страница уже загружена и обработчики висят только на тех, что были при загрузке страницы.
Здесь же$('.menu').on('click', 'i.fa-bars', function(){ обработчик вешается на элементы .menu и грубо говоря ему все равно сколько внутри лежит элементов, только при клике внутри .menu он проверяет срабатывать обработчику или нет сверяя 2 параметр у (on()) с элементом, по которому был сделан клик

https://webref.ru/dev/jqfundamentals/events

[Василий Петров]

Андрей Токмаков: Большое спасибо)