0

我有动态生成任意数量的 tr 标签的 jquery 代码，每个标签都包含一个同名的按钮。当我单击按钮时，它会触发页面上的所有按钮。我该如何防止这种情况。由于 html 是动态生成的，我不确定如何独立识别每个按钮元素，然后在呈现后检索它们。这是代码：

// create order row
var addOrderRow = function(id, name) {
var self = this;
self.Name = name;
self.Id = id;


self.Output = "<tr><th>Code</th><th>Product</th><th>Options</th><th>Size</th><th>Package</th>" +
    "<th>Price</th><th>Quantity</th><th>Delivery Date</th><th></th></tr>" +
    "<tr><td><select name='prodCode'></select></td><td><select name='product'></select>" +
    "</td><td><select name='options'></select></td><td><select name='size'></select></td><td>" +
    "<select name='package'></select></td><td><select name='price'></select></td>" +
    "<td><input type='text' name='quantity'></input></td><td><input type='text' " +
    "name='deliverDate'></input>" +
    "</td><td><button name='addToCart'>Add To Cart</button></td></tr>";

// populate product code
getPcodeProducts();

return self.Output;
};

这是jquery代码：

var AddToCart = function() {
$("button[name=addToCart]").click(function() {

    $(this).alert('hello');

});
};
4

2 回答 2

1

您可以使用该id属性。缺点是您需要跟踪用于尊重唯一性的 id。

另一种选择是$(this)与data属性一起使用。该值不需要是唯一的。

使用 jquery，您可以$(this)在事件处理程序中使用来获取元素的句柄。

<button data-id="@id">Add To Cart</button>

$("button[name='addToCart']").on("click", function() {
    var rowId = $(this).data("id");
    alert($(this));  // only one alert occurs
});

工作示例：jsfiddle

于 2013-05-22T02:02:38.983 回答
0

如果您通过函数添加按钮，有两种方法可以添加唯一 ID。

  1. 如果您愿意使用 jQuery UI，那么有一个 uniqueId() 函数将为您的按钮分配一个唯一 ID。 http://api.jqueryui.com/uniqueId/

前任。$(curButton).uniqueId()

  1. 自行创建一个新的唯一 ID。

前任。

var uniId = 0;
$(curButton).attr('id', "u-id-" + uniId++);
于 2013-05-22T02:07:58.367 回答