识别 php 行中的 jquery 按钮单击答案

【问题标题】：identify jquery button click in php rows识别 php 行中的 jquery 按钮单击
【发布时间】：2011-12-21 21:17:10
【问题描述】：

我有一个输入按钮：

while ($row = $result->fetch()) {
echo '<table class="cart-row" cellspacing="0" cellpadding="0" width="100%">';
echo '<tbody>';
echo '<tr>';
echo '<td width="75"><img border="0" width="59px" height="78px" title="" alt="" src=' . $row["ImagePath"] .'></td>';
echo '<td width="203"><span id="itemName" class="itemElements">'. $row["Name"] .'</span></td>';
echo '<td width="135"><span id="qtyNum">('. $row["Qty"] .')</span> <br />';
echo '<span id="qtyRemoveLink"><input class="linkbtn" type="submit" id="btnRemove" value="Remove"></td>';                            
echo '<td width="180"><span id="orderStatus" class="itemElements">In Stock Usually dispatched within 24 hours</span></td>';
echo '<td width="175" id="itemPriceRow"><span id="itemPrice">€ '. $row["Price"] .'</span></td>';
echo '</tr>';
echo '</tbody>';
echo '</table>';
echo '<br>';                            
}

我正在尝试使用此方法在单击按钮时触发事件，但是该事件仅针对第一行中生成的第一个按钮触发。我正在使用这种方法：

$(document).ready(function() {
                $('#btnRemove').click(function() {
                     alert("test");
                });
             });

有什么办法可以解决这个问题吗？我知道在 C# 中有行数据绑定方法，但是在 jQuery 中，如果它存在，我现在不知道。谢谢

【问题讨论】：

正如下面的评论中提到的——你在整个地方都错误地使用了 id。这会导致您的特定情况出现问题，但您还需要更新所有标记以正确使用 ID（或实际上不使用 ID）。

标签： php jquery button triggers rows

【解决方案1】：

您正在选择一个元素以将click 事件处理程序绑定到具有唯一 ID 的元素。当您按 ID 选择时，您将只返回第一个匹配元素，因为要成为有效 ID，它必须是唯一的。

将 ID 更改为类并将选择器更改为 .btnRemove，alert 将适用于所有按钮。

echo '<span id="qtyRemoveLink"><input class="linkbtn" type="submit" id="btnRemove" value="Remove"></td>';

应该改为：

echo '<span id="qtyRemoveLink"><input class="linkbtn btnRemove" type="submit" value="Remove"></td>';

还有：

$('#btnRemove').click(function() {

应该改为：

$('.btnRemove').click(function() {

这是一个演示：http://jsfiddle.net/rSyCw/

这是网站上关于创建有效 HTML ID 的绝佳答案：What are valid values for the id attribute in HTML?

【讨论】：

是的，并且在示例代码中还有许多其他实例的 ID 被重复使用（即不是唯一的）。 OP 应该在他处理这些问题时解决这些问题。 ;-)

【解决方案2】：

为按钮使用类，而不是 ID。 ID 是唯一标识符（在整个页面上只能是一个具有该名称的标识符），但是类可以应用于多个元素。所以...

<input type="submit" id="btnRemove" />

变成

<input type="submit" class="btnRemove" />

因此，您的选择器更改为.btnRemove。

而且，既然您知道 ID 必须是唯一的，那么您应该继续重新配置输出以使用类，或者使用附加了唯一 ID 的 ID。例如

<?php
  while ($row = $result->fetch()){
?>
    <!-- Other HTML -->
    <input type="submit" id="btnSubmit_<?= $row['Unique_Column_Id']; ?>" ... />

然后你可以修改你的选择器：

$('[id^="btnSubmit_"]').click(...); // All elements with an
                                    // ID that starts with "btnSubmit_"

【讨论】：

是的，我怎么会忘记！感谢您帮助我现在工作！
使用类而不是需要处理字符串的伪选择器（正则表达式）的性能要好得多。 jQuery 尽可能使用getElementByClassName()，这非常快，但仅在您按类选择时才有效。

【解决方案3】：

这里的一个危险信号是，您在循环的每次迭代中生成多个具有相同 ID 的元素。元素 ID 在您的文档中必须是唯一的。我的猜测是 jQuery 只绑定到它找到的第一个 ID 为“btnRemove”的元素，因为它假定您的 ID 是唯一的。

正如其他人所说，在你的按钮上使用类名会帮助你解决问题，但你仍然应该想出一种方法在你的 itemName、qtyNum、qtyRemoveLink、orderStatus 上放置唯一 ID 、itemPriceRow 和 itemPrice 元素，以及您可能使用此技术的其他任何地方。

【讨论】：