Поймать клик и получить значение тега в динамически загружаемом контенте jquery

Question

имею несколько блоков с разными id

<div class="p1">
  <div class="p2" id-post-answer="ХХХ">
    <a href="javascript:void(0);">Ответить</a>
  </div>
</div>

На странице подгружаются еще такие блоки с помощью ajax

Обработчик всего этого:

$(document).ready(function($)
  {
  $(".p1").each(function(index, element)
    {
    // если кликнули ответить
    $(element).find(".p2").click(function(e)
      {
      var id_post = $(element).find(".p2").attr("id-post-answer");
      console.log("click "+id_post);
      });
    });
  });

Не могу получить значение id-post-answer у подгружаемых динамически блоков. У загружаемых сразу значение получаю, а у подгружаемых нет. Не могу понять почему. Помогите люди добрые :)

Update: где тут должен быть $("body").on("click", - но блин. убей не пойму принцип работы в моем случае :(

Answer 1

Событие клика навешивается на те элементы, которые существуют в момент навешивания. Иначе говоря, на подгруженные блоки это распространяться не будет. Поэтому вам необходимо после подгрузки вешать снова событие на подгруженные элементы

UPD: В комментариях под вопросом предложен хороший метод с навешиванием события на родительский блок. Внутри обработчика уже проверять через event.target какой конкретно элемент нажат.

Answer 2

Ожидалось, что кто-нибудь из добрых людей напишет:

  $("body").on("click", ".p2", function (e)
    {
    var id_post_answer = $(this).attr("id-post-answer");
    e.preventDefault();
    });

иногда бывает тупишь на ровном месте...

БЛОГ НА HUSL

Поймать клик и получить значение тега в динамически загружаемом контенте jquery

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