javascript — jQuery принимает первый результат PHP

Question

javascript — jQuery принимает первый результат PHP

Я пытаюсь выбрать данные, которые поступают из базы данных с помощью jQuery, но моя проблема в том, что только к первому результату привязан обработчик кликов.

Вот часть PHP:

<?php

$sql = "SELECT * FROM cars WHERE rented = '0'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$carName = $row['name'];
echo '<div id="car" car-name="'.$carName.'">'.$carName.'</div>';
}
}else{
echo 'ολα τα αυτοκινιτακια ειναι νοικιασμενα';
}

?>

и часть jQuery:

$('#car').on('click', function(){
var carName = $(this).attr('car-name');
alert(carName);
});

Допустим, я динамически создаю два ДИВ элементы (потому что в БД всего две записи). JQuery распознает только первый. Как я могу заставить его распознать все ДИВ элементы?

2

javascript jquery jquery-on mobile php

Решение

Другие решения

Вместо id (#car) используйте класс (.car) для div

PHP

echo '<div class="car" car-name="'.$carName.'">'.$carName.'</div>';

Jquery

$('.car').on('click', function(){
var carName = $(this).attr('car-name');
alert(carName);
});

1

использовать в HTML data-car-name="car name"

и JQuery

while($row = $result->fetch_assoc()) {
$carName = $row['name'];
echo '<div class="car" data-car-name="'.$carName.'">'.$carName.'</div>';
}

$('.car').on('click', function(){
var carName = $(this).attr('data-car-name');
alert(carName);
});

также да @ManiMuthuPandi с использованием классов.

1

$ (document) .on (‘click’, ‘# car’, function () {var carName = $ (this) .attr (‘car-name’); alert (carName);});

Поскольку обработчик кликов, прикрепляемый браузером, работает быстрее, чем ваш php-рендеринг. Если вы прикрепите обработчик кликов к документу, он будет работать всегда.

Надеюсь это поможет

Спасибо

1

Вы должны добавить класс автомобиля:

<?php

$sql = "SELECT * FROM cars WHERE rented = '0'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$carName = $row['name'];
echo '<div class="car" car-name="'.$carName.'">'.$carName.'</div>';
}
}else{
echo 'ολα τα αυτοκινιτακια ειναι νοικιασμενα';
}

?>

Jquery

$('.car').on('click', function(){
var carName = $(this).attr('car-name');
alert(carName);
});

Надеюсь, это поможет вам 🙂

1

Согласно документации MDN для атрибута Я бы:

Идентификатор глобальный атрибут определяет уникальный идентификатор (ID), который должен быть уникальным во всем документе. Его целью является идентификация элемента при связывании (с использованием идентификатора фрагмента), написании сценариев или стилизации (с помощью CSS).¹

Так что при создании ДИВ элементы, дать им уникальные значения для Я бы приписывать. Чтобы добавить обработчик щелчка ко всем элементам для элементов автомобиля, добавьте учебный класс атрибут (например, class="car") к <div> элементы:

echo '<div id="car_'.$carName.'" car-name="'.$carName.'" class="car">'.$carName.'</div>';

Затем используйте селектор класса (Т.е. .car) в обработчике кликов:

$('.car').on('click', function(){
var carName = $(this).attr('car-name');
alert(carName);
});

См. Это продемонстрировано ниже (с удаленным кодом PHP, так как эта песочница не поддерживает его):

$('.car').on('click', function(){
var carName = $(this).attr('car-name');
alert(carName);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="car_MDX" car-name="MDX" class="car">MDX</div>
<div id="car_m3" car-name="m3" class="car">m3</div>
<div id="car_z3" car-name="z3" class="car">z3</div>

1

Вы перезаписываете идентификатор #car. Используйте класс:

<?php

$sql = "SELECT * FROM cars WHERE rented = '0'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$carName = $row['name'];
echo '<div class="car" car-name="'.$carName.'">'.$carName.'</div>';
}
}else{
echo 'ολα τα αυτοκινιτακια ειναι νοικιασμενα';
}

?>

JQuery:

$('.car').on('click', function(){
var carName = $(this).attr('car-name');
alert(carName);
});

0

Источник

По вопросам рекламы [email protected]

Accepted Answer

Вам нужно получить доступ к событию по имени класса вместо ID

<?php

$sql = "SELECT * FROM cars WHERE rented = '0'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$carName = $row['name'];
echo '<div class="car" car-name="'.$carName.'">'.$carName.'</div>';
}
}else{
echo 'ολα τα αυτοκινιτακια ειναι νοικιασμενα';
}

?>

JS

$('.car').on('click', function(){
var carName = $(this).attr('data-car-name');
alert(carName);
});

1