jQuery 获取第一个 PHP 结果答案

【问题标题】：jQuery taking the first PHP resultjQuery 获取第一个 PHP 结果
【发布时间】：2017-04-07 06:36:16
【问题描述】：

我正在尝试使用 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 元素（因为 db 中只有两条记录）。 jQuery 只识别第一个。如何让它识别所有 div 元素？

【问题讨论】：

试试看，$(document).on("click", "#car", function(e) {var carName = $(this).attr('car-name');alert(carName);});
所有 div 的 ID 不应相同
只需使用类 (class="car") 即可。

标签： javascript php jquery mobile jquery-on

【解决方案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);
    });

【讨论】：

【解决方案2】：

div 使用 class(.car) 代替 id (#car)

PHP

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

JQUERY

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

【讨论】：

【解决方案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 也可以使用类。

【讨论】：

【解决方案4】：

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

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

希望对你有帮助

谢谢

【讨论】：

【解决方案5】：

你应该添加类车：

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

希望对你有帮助:)

【讨论】：

【解决方案6】：

根据属性 id 的 MDN 文档：

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

因此，在创建 div 元素时，请为 id 属性赋予它们唯一的值。要将点击处理程序添加到汽车元素的所有元素，请将 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}

【讨论】：

【解决方案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);
    });

【讨论】：