0

Подскажите, как обработать .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 ответ 1

0

Надо бы клик вешать не на сам элемент, а на родителя, который не изменяется. Это называется делегирование. Ибо ты пытаешься повесить событие на элемент, которого нет. Логично, что он и не работает.

$('#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>

Подробнее http://jquery.page2page.ru/index.php5/On#.D0.9F.D1.80.D1.8F.D0.BC.D0.B0.D1.8F_.D0.B8_.D0.B4.D0.B5.D0.BB.D0.B5.D0.B3.D0.B8.D1.80.D0.BE.D0.B2.D0.B0.D0.BD.D0.BD.D0.B0.D1.8F_.D0.BE.D0.B1.D1.80.D0.B0.D0.B1.D0.BE.D1.82.D0.BA.D0.B0_.28.D0.BF.D0.B0.D1.80.D0.B0.D0.BC.D0.B5.D1.82.D1.80_selector.29

4
  • "Явный родитель" не нужен..как раз только что нашел решение $(document).on('click', 'figure', function(){ console.log('Нажато'); });. Через 5 минуточек приму как решение..так или иначе это решение )
    – Steam.apk
    15 янв 2021 в 13:06
  • @Steam.apk document - это и есть родитель, только на несколько уровней вверх. Только если каждый будет навешивать события на документ, а страница с функционалом большая, то это не очень хорошо. Все события в итоге будут повешаны на документ и это приведёт к забавным багам в дальнейшем) Поэтому лучше вешать событие на ближайшего неизменяемого предка 15 янв 2021 в 13:08
  • Ну у меня именно фигура будет такая, "элитная"..остальные по уму и не навешаны на document )
    – Steam.apk
    15 янв 2021 в 13:09
  • @Steam.apk Ну, так или иначе, суть в делегировании, описанном в ответе. И, как я написал вышел, document - это тоже родитель... Если точнее, скорее, всё же, правильнее "предок". Это корректнее. 15 янв 2021 в 13:11

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.