Ajax на php while

Я использую следующий код Ajax на php while.

Например, в while есть 10 списков, 10 кнопок и 10 кодов ajax. В первый раз, когда я нажимаю любую кнопку, ajax не работает. Когда я нажимаю ту же кнопку во второй раз, ajax работает, затем, когда я нажимаю на другую кнопку, происходит та же ситуация, но на этот раз, когда я нажимаю на первой кнопке он вообще не работает. Какую бы кнопку я ни нажимал последней, на этой кнопке работает только ajax, другие не работают

<script>
$(document).on('click', '#<?=$pr->id?>', function (){
$.ajax({
url:"<?=_href_?>card.php",
method:"POST",
data:<?=$pr->id?>,
dataType:"json",
success:function(data)
{
$('.cart_details<?=$pr->id?>').html(data.cart_details<?=$pr->id?>);
}
});
});
</script>
<input type="button" class="btn btn-sm btn-default" value="+" id="<?=$pr->id?>">

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

Автор решения: Sergey Tatarincev

скорее всего у вас не ajax не работает, а событие onclick не срабатывает, поскольку селектор не находит соответствующий объект. обработчики всегда вешайте когда документ полностью загрузился, т.е. в $(document).ready()

→ Ссылка
Автор решения: teran

ибо не надо генерировать JS-код в цикле на пхп. У вас есть N-кнопок, реализующих нужный функционал. Они выполняют одинаковый по смыслу код, используя разные параметры. Поэтому код должен быть один, а параметры должны быть привязаны к конкретной кнопке.

Генерите кнопки с разметкой, где у них будет общий класс и атрибут, описывающий нужные параметры, например

<a href="#" class="btn my-btn" data-id="1">1</a>

потом вы навешиваете обработчик на класс, берете атрибут, и на его основе формируете аякс вызов

$(".my-btn").click(function(e){
    let id = $(this).data('id');

    $(`#cart-details-${id}`).load("/card.php", { id: id });
     
});

можете идентификатор куда загружать данные также прописать в самой кнопке, а-ля data-target="#cart-details-1", и при клике его извлекать, а не формировать.

Если у вас они все в одном родительском блоке, то в целом эти идентификаторы не нужны. будет что-то вроде

let ct =  $(this).closest('.wrapper').find(".cart-details")
$(ct).load(...);
→ Ссылка