Добрый вечер.
столкнулся с небольшой проблемой,
в DOM дерево передаю информацию с JSON вот такого вида.
<div class="block-info">
<span class="block-food">кекс очень вкусный</span>
<button class="block-btn">Заказать</button>
</div>
<div class="block-info">
<span class="block-food">кекс совсем не вкусный</span>
<button class="block-btn">Заказать</button>
</div>
// и один инпут в который нужно передать значение.
<input class="out" type="text">
все блоки и контент внутри них имеют одинаковые классы.
задача состояла в том чтобы при нажатии на
<button class="block-btn">Заказать</button>
в
<input class="out" type="text">
передавалось значение класса class="block-food" данного блока.
для этого решения использовал данный код.
$('.block-btn').on('click', function() {
var food = $(this).parent().find('.block-food').text();
$('.out').val(food);
});
но я не могу понять почему код срабатывает только для первого блока, а для остальных нет(.
то есть при нажатии на (ЗАКАЗАТЬ) от первого блока, в инпут выводится значение (кекс очень вкусный).
а при нажатии на (ЗАКАЗАТЬ) второго блока - уже ничего не происходит((
может кто то имел дело с данной проблемой?
может нужно переписать код?