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

Question

Я пытаюсь выбрать данные, которые поступают из базы данных с помощью 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);
    });

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

Answer 1

Вам нужно получить доступ к событию по имени класса вместо 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);
    });

Answer 2

Вместо 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);
    });

Answer 3

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

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

Поэтому при создании элементов div присвойте им уникальные значения для атрибута id. Чтобы добавить обработчик щелчка ко всем элементам для автомобильных элементов, добавьте атрибут класса (например, 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>

---

¹ _{https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id}

Answer 4

Использовать в 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 с использованием классов.

Answer 5

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

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

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

Спасибо

Answer 6

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

<?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);
});

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

Answer 7

Вы перезаписываете идентификатор #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);
    });