Как менять динамично данные в тегах, чтобы работала кнопка «Купить»?

Question

[tarroma9]

Доброго времени суток.
Есть данные на сайте, которые меняются в зависимости от выбранного параметра. Затем они передаются в форму HTML c определенным id (здесь показано для title) при нажатии на кнопку купить, после открытия модального окна.
<div class="hi_title">Не статичное значение</div>

<a href="#" class="buy-btn">купить</a>

$('.buy-btn').click(function(e){
    e.preventDefault();
    $('.container').addClass('blur-popup');
     $('.overlay, #buyitem-modal').show();
    let title = $(this).siblings('.hi_title').text();
  $('#title').val(title);
});

Если значения не менять, то всё отправляется. Но стоит другой функции, поменять название внутри тега (class="hi_title"), как сразу же кнопка "купить" перестает работать.
Подскажите, как оптимизировать код, чтобы она работала всегда, даже после изменений в уже загруженной странице? Ведь мне эти (и другие) параметры как раз ею нужно передать.

Comments

[lUser L]

$('body').on('click', '.buy-btn',  function(){
    e.preventDefault();
    $('.container').addClass('blur-popup');
     $('.overlay, #buyitem-modal').show();
    let title = $(this).siblings('.hi_title').text();
  $('#title').val(title);
});

[tarroma9]

Эмиль 🔥, Огромное спасибо!

Answer 1

[lUser L]

Если добавляются новые элементы — при помощи ajax’а или функций типа append() — то события, click в вашем случае не затрагивают их.

Для того, что бы обратиться к динамически созданным элементам используйте делегирование.

Предлагаю почитать:
Обработка динамически доб...
Делегирование событий

$('body').on('click', '.buy-btn',  function(){
    e.preventDefault();
    $('.container').addClass('blur-popup');
     $('.overlay, #buyitem-modal').show();
    let title = $(this).siblings('.hi_title').text();
  $('#title').val(title);
});