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元素（因为只有两个记录D b）。 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）的使用类（。汽车）的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

使用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 4

的$（document）。在（ '点击'， '＃车'，函数（）{VAR carName = $（this）.attr（'car-name'）; alert（carName）;}）;

因为通过浏览器连接的点击处理程序比您的php渲染速度快。如果您要在文档上附加点击处理程序，那么它将始终工作。

希望这有助于

感谢

Answer 5

你覆盖#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); 
    }); 

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

％的MDN文档属性id：

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

所以创建DIV元素时，给他们独特的价值观为ID属性。为了点击处理程序添加到为汽车元素的所有元素，一个类属性（如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}