使用 JQuery 从多行（购物车）中捕捉按钮按下答案

【问题标题】：Catching button presses from many rows (Shopping Cart) with JQuery使用 JQuery 从多行（购物车）中捕捉按钮按下
【发布时间】：2012-08-07 00:00:42
【问题描述】：

我正在编写一个购物车类型功能，我在 $(.ajax) 调用中查询数据库中的许多项目（SKU、数量、名称）。我想显示一个表格，其中包含与用户正在寻找的所有项目相匹配的选项，用户可以在其中指定所需数量的选项。然后他们可以单击“添加”将他们的选择添加到“购物车”。

这是一个简化的例子：

<table>
  <tr><td>Item A</td><td>SKU: 001</td><td>Qty: <input name="qty-sku001"> <input type="button" value="Add"></td></tr>
  <tr><td>Item B</td><td>SKU: 002</td><td>Qty: <input name="qty-sku002"> <input type="button" value="Add"></td></tr>
  <tr><td>Item C</td><td>SKU: 003</td><td>Qty: <input name="qty-sku003"> <input type="button" value="Add"></td></tr>
</table>

当按钮被点击时，从一行获取信息的理想方式是什么？我正在考虑添加一个 onclick="AddToCart(x);"到每个按钮，但这只是传递一个 HTML 表单元素对象。我是否需要将每一行设为自己的表单，还是可以获取按钮的父 TR，然后从该行的输入和其他元素中获取值？

数据最终将被附加到“购物车”div 的表中，因此我需要从 ajax 调用中加载的三段数据。我想我可以为每一行添加隐藏元素，但必须有一个更高效、更优雅的解决方案。

谢谢！

【问题讨论】：

标签： php jquery forms

【解决方案1】：

假设你使用 jQuery，你可以这样使用：

$("input[type=button]").click(function(evn){
    var rowName = $(this).prev().attr('name'); // this will give you the name attribute of element that is before the button in the DOM

    // do here whatever you need with rowName
});

编辑

您可以向按钮添加一个类，以防止为页面上的所有按钮运行此代码，如下所示：

<input class="row-button" type="button" value="Add">

并使用这个javascript：

$(".row-button").click(function(evn){
    // the code from above
}

【讨论】：

有趣的是，我根本无法选择这些按钮。它们是在 ajax 调用的成功函数中动态创建的，该调用是在一组 jquery 选项卡中创建的。我认为标签或 ajax 对象的调用可能会导致问题，因为当我自省页面时它们确实出现在 DOM 中。如上所示，我尝试绑定 click 函数，但从未到达该函数。
您是否尝试在success 回调结束时绑定此函数？因为这些按钮是在 ajax 的回调中创建的，所以应该在创建后调用绑定
谢谢，海纳。我会回去再试一次。在此期间，我为每个按钮添加了一个“onclick”，这很有效，但我不喜欢涉及的所有额外代码。

【解决方案2】：

$("input:button").click(function(){var $tr = $(this).closest('tr');});

$tr 是一个按钮被点击的 jquery 行对象

【讨论】：

谢谢，弗兰奇。 'closest' 选择器比 .parent().parent() 非常有用和简洁。