Jquery показать динамически загруженный div

Question

У меня есть набор DIVS, которые были загружены динамически с помощью вызова AJAX jquery. Все DIVS имеют привязку с классом .more_info и идентификатором info-xxx (где xxx - идентификатор продукта). Существует скрытый div с идентификатором infoxxx, который я хочу показать при нажатии на ссылку.

Мой код:

$(document.body).on('click', '.more_info' ,function(){
    var dealid = ($(this).attr('id')); 

    $("#info"+dealid).show(1000);  

  });

но div (infoxxx) не отображается. Я предполагаю, что есть другой способ доступа к этому div, потому что он был загружен динамически?

Answer 1

Я не знаю, правильно ли я понял HTML, но основная идея такова:

var prodID = dealID.split('-').pop();

dealID это шаблон info-xxx

Используйте split('-') в дефисе и в конце массива из 2 элементов ['info', xxxx]

Затем соедините pop() с методом split() и получите xxxx по возвращении.

---

Демо

$(document.body).on('click', '.more_info', function() {
  var dealID = ($(this).attr('id'));

  var prodID = dealID.split('-').pop();

  $("#info" + prodID).show(1000);

});

.more_info::after {
  content: attr(class)
}

<div>
  <a href='#/' id='info-1234' class='more_info'></a>
</div>
<input id='info1234' hidden>

<div>
  <a href='#/' id='info-1359' class='more_info'></a>
</div>
<input id='info1359' hidden>

<div>
  <a href='#/' id='info-6911' class='more_info'></a>
</div>
<input id='info6911' hidden>

<div>
  <a href='#/' id='info-5227' class='more_info'></a>
</div>
<input id='info5227' hidden>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Согласно предоставленным деталям сделанная из ($ (this) .attr ('id')) сделка будет иметь форму info-xxx, поэтому при попытке

$("#info"+dealid).show(1000);

это будет похоже на

$("#infoinfo-xxx").show(1000);

Получите правильный идентификатор, заменив инфо-текст

$(document.body).on('click', '.more_info' ,function(){
    var dealid = ($(this).attr('id')).replace("info-",""); 

    $("#info"+dealid).show(1000);  

  });