Не работает событие при нажатии объект (jquery)

Question

Я через jquery создаю объект, задаю ему класс и вставляю в другой объект(Это происходит по событию нажатии кнопки), с этим всё здорово:

var newEl4 = $('<div><img  src="krest.png"></div>');
$(newEl4).addClass('crest');
$('#task-block-1').append(newEl4);

Далее навешиваю событие на нажатие объектов класса crest:

$('.crest').click(function(){
            console.log(111);
        });

И при нажатии не работает. Я пробовал менять этот код на этот:

$('img').click(function(){
            console.log(111);
        });

И создавал прям html документе картинку(такую же), и -при нажатии на неё работало-, а при нажатии на, созданную через jquery, - нет. В чём может быть проблема и, как исправить?

Answer 1

$('#task-block-1').on('click', '.crest', function(){
  console.log(111);
});

или

var newEl4 = $('<div><img  src="krest.png"></div>');
$(newEl4).addClass('crest').click(function(){
  console.log(111);
});
$('#task-block-1').append(newEl4);

Answer 2

Тебе нужно либо к боди вешать лисанер на клик, либо после инициализации (как обычно) вешать клик событие конкретно на созданный объект

Я написал до\после, и создание перенёс в строку (имхо - лучше шаблонные стринги использовать, чем 10 строк для создания объедка)

// before:
$('body').on('click', '#task-block-1 > .crest', ()=>{
    console.log('crest click1 before dyn creation');
});

// create:
$('#task-block-1').append(`<div class="crest"><img src="krest.png"></div>`);

// after:
$('.crest:first').click(()=>{
    console.log('crest click1');
});


$('.crest > img').click(()=>{
    console.log('img click');
});

БЛОГ НА HUSL

Не работает событие при нажатии объект (jquery)

Ответы (2 шт):