Question

我正在尝试使用jQuery选择来自数据库的数据，但我的问题是只有第一个结果才有一个绑定到它的点击处理程序。

以下是PHP部分：

select 
    a.*, b.*
from 
    dbo.table1 a 
join 
    dbo.table2 b on a.id = b.id 
where 
    /*your where clause for filtering*/

和jQuery部分：

<?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 'ολα τα αυτοκινιτακια ειναι νοικιασμενα';
    }

?>

假设我正在动态创建两个 div 元素（因为db中只有两个记录）。 jQuery只识别第一个。如何让它识别所有 div 元素？

Answer 1

而不是id（#car）使用class（.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 2

在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 3

您需要访问类名而不是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 4

$（文件）.on（＆＃39;点击＆＃39;，＆＃39;＃car＆＃39;，function（）{var carName = $（this）.attr（＆＃39; car-name＆＃39;）; alert（carName）;}）;

因为浏览器附加的点击处理程序比你的php渲染更快。如果你在文档上附加一个点击处理程序，那么它将始终有效。

希望这有帮助

由于

Answer 5

你应该添加class 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 'ολα τα αυτοκινιτακια ειναι νοικιασμενα';
}

＆GT;

Jquery的

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

希望这可以帮助你：）

Answer 6

根据属性id的MDN文档：

id global attribute定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。它的目的是在链接（使用片段标识符），脚本或样式（使用CSS）时识别元素。¹

因此，在创建 div 元素时，请为 id 属性赋予它们唯一的值。要将点击处理程序添加到car元素的所有元素，请将 class 属性（例如class="car"）添加到<div>元素：

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

然后在点击处理程序中使用class selector（即.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 7

你正在覆盖#car 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 'ολα τα αυτοκινιτακια ειναι νοικιασμενα';
    }

?>

JQuery的：

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

jQuery取得了第一个PHP结果

7 个答案: