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 шт):
скорее всего у вас не ajax не работает, а событие onclick не срабатывает, поскольку селектор не находит соответствующий объект. обработчики всегда вешайте когда документ полностью загрузился, т.е. в $(document).ready()
ибо не надо генерировать 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(...);