Не работают события после innerHTML?

Question

[Andrei258]

Здравствуйте, помогите пожалуйста. День уже не могу исправить.
Погуглил, посмотрел всякие форумы не где не могу найти ответ, точнее есть ответы но не помогают.

У меня есть такой код

document.getElementById( "homey_gallery_container" ).insertAdjacentHTML('beforeend', '<div class="col-sm-2 col-xs-4 listing-thumb">' +
'<figure class="upload-gallery-thumb">' +
'<img src="' + URL.createObjectURL(file) +
'" alt="thumb">' + '</figure>' + '<div class="upload-gallery-thumb-buttons">' +
'<a class="icon-featured" data-thumb="' + URL.createObjectURL(file) +
'" data-listing-id="' + 0 + '"  data-attachment-id=""><i class="fa fa-star-o"></i></a>' +
'<button class="icon-delete" data-listing-id="' + 0 + '"  data-attachment-id=""><i class="fa fa-trash-o"></i></button>' + '<input type="hidden" class="listing-image-id" name="listing_image_ids[]" value=""/>' +
'</div>'+'<span style="display: none;" class="icon icon-loader"><i class="fa fa-spinner fa-spin"></i></span>' +'</div>');

После вставки должен сработывать событие при клике на "icon-featured".
Если вставить этот код вручную то все работает а если вставить через innerHtml или через insertAdjacentHTML то событие не будет работать. Пробовал много вариантов, не работает, не знаю уже, что можно сделать

Comments

[Владимир]

Где код как вы на собыите подписываетесь?

[Aetae]

Не вижу никаких обработчиков клика в коде, с чего бы срабатывать тому чего нет?

Если какой-то код отвечает за добавление обработчиков - найдите его и вызовите после того как запишете новую разметку на страницу.

[Владимир]

Aetae, А после очередной замены дом елемента опять вызывать? А в какой момент отписываться?

[Andrei258]

Aetae,

var lisitng_thumbnail_event = function() {
            $('.icon-featured').on('click', function(e){
                e.preventDefault();

                var $this = jQuery(this);
                var thumb_id = $this.data('attachment-id');
                var thumb = $this.data('thumb');
                var icon = $this.find( 'i');

                $('.upload-view-media .media-image img').attr('src',thumb);
                $('.upload-gallery-thumb-buttons .featured_image_id').remove();
                $('.upload-gallery-thumb-buttons .icon-featured i').removeClass('fa-star').addClass('fa-star-o');

                $this.closest('.upload-gallery-thumb-buttons').append('<input type="hidden" class="featured_image_id" name="featured_image_id" value="'+thumb_id+'">');
                icon.removeClass('fa-star-o').addClass('fa-star');
            });
}

[Andrei258]

Aetae, как это делается?

[Aetae]

Andrei258,
$('.icon-featured').on('click', function(e){
->

$(document).on('click', '.icon-featured', function(e){

Владимир, отписываться не надо, сдохнет элемент - обработчики сами отвалятся. Делегировать, как выше привёл, конечно лучше, но и так сошло бы.

[Andrei258]

Aetae, Спасибо большое, все получился

Answer 1

[Григорий Боев]

Попробуйте сделать это через:
createElement()
node.appendChild()

Comments

[Владимир]

Вы советуете человеку как правильнее модифицировать дом, но при чем здесь слушатели событий?

[Andrei258]

Попробовал, не сработал

Answer 2

[Владимир]

Если вы подписываетесь на событие на самом елементе a.icon-featured то оно и не будет работать.
Вариант 1) Вешайте событие на homey_gallery_container и проверяйте event.target
Вариант2) Вешайте событие через пропсу в HTML тогда не прийдется менеджить подписку и отписку.
Но само по себе использование insertAdjacentHTML вызывает миллион вопросов.

Comments

[Andrei258]

Извините, но не получается. Может что то не то сделаю но не получается.
Javascript подключатся в другом файле, может все из за этого?