Как применить JS код к контенту, полученному на страницу по AJAX?

Question

[ishimskayamahorka14]

На страницу подгружается контент (AJAX) по клику на элемент с классом .item

В подгружаемом контенте также есть элемент с классом .item, по нажатию на который нужно снова подгрузить контент. Но функция не применяется к динамически добавленному контенту. Как быть?

jQuery(document).ready(function($) {
  $('.quiz-input').on("change", function() {
    genContent($(this));
    $('.next').trigger('click');
  });

  function genContent(e) {
    var step = $(e).closest('.quiz-item').attr('data-slide');
    var data = {
      'type': $(e).val(),
      'step': step,
    }
    $.ajax({
      type: 'POST',
      url: "<?= $this->genUrl('ajax_service'); ?>",
      cache: false,
      data: data,
      success: function(html) {
        step++
        if ($('.quiz-item[data-slide="' + step + '"] .dynamicContent').length == 0) {
          $('.quiz-item[data-slide="' + step + '"]').append(html);
        }
      },
      complete: function() {
        genContent();
      }
    })

  }
});

Answer 1

[ForSureN1]

Клик не работает потому что ваш обработчик на элементе применяется к уже срендеренному контенту при загрузке страницы, а новые элементы появляются динамически, погуглите в сторону делегирования