Question

我有jquery代码，动态生成任意数量的tr标签，每个标签包含一个具有相同名称的按钮。当我点击按钮时，它会触发页面上的所有按钮。我怎么能阻止这个。由于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');

});
};

Answer 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

Answer 2

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

如果你愿意使用jQuery UI，那么有一个uniqueId（）函数可以为你的按钮分配一个唯一的id。 http://api.jqueryui.com/uniqueId/

实施例。 $(curButton).uniqueId()

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

实施例。

var uniId = 0;
$(curButton).attr('id', "u-id-" + uniId++);

有没有办法从页面上的其他按钮中隔离一个具有相同名称的按钮

2 个答案: