Обработка клика по фигуре
Подскажите, как обработать .click или on('click'..) по фигуре ? Фигура добавляется динамически по нажатию на кнопку и имеет такую структуру:
<figure>
<div class="img_wrapper ">
<div class="highlight">
<img src="/img.jpg">
</div>
<figcaption><p>Caption</p></figcaption>
</div>
</figure>
Пробовал через $('figure').click, через getElementByTagName, через document ready и т.п.
И то ли я что-то делаю неправильно, то ли причина в другом
Ответы (1 шт):
Автор решения: Алексей Шиманский
→ Ссылка
Надо бы клик вешать не на сам элемент, а на родителя, который не изменяется. Это называется делегирование. Ибо ты пытаешься повесить событие на элемент, которого нет. Логично, что он и не работает.
$('#parent').append(`<figure data-test="5">
<div class="img_wrapper">
<div class="highlight">
<img src="/img.jpg">
</div>
<figcaption><p>Caption</p></figcaption>
</div>
</figure>
<figure data-test="6">
<div class="img_wrapper">
<div class="highlight">
<img src="/img.jpg">
</div>
<figcaption><p>Caption</p></figcaption>
</div>
</figure>
<figure data-test="7">
<div class="img_wrapper">
<div class="highlight">
<img src="/img.jpg">
</div>
<figcaption><p>Caption</p></figcaption>
</div>
</figure>`);
$('#parent').on('click', 'figure', function() {
alert($(this).data('test'));
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="parent">parent</div>