有沒有辦法從同名的頁面上的其他按鈕隔離按鈕

我有jQuery代碼，動態生成任意數量的tr標籤，每個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'); 

}); 
};

來源

2013-05-22 user1206480

你的js代碼在哪裏？ – 2013-05-22 01:45:18

.. html標籤的id字段就是爲了這個目的..所以相同類別的按鈕用於爲功能設計不同的id – brendosthoughts

如果您告訴我們您想要做什麼，我們可以提出更好的解決方案。區分按鈕的顯而易見的方法是使用它們的id屬性。由於我們不知道點擊時想要發生什麼，因此很難提供更具體的建議......但是一種方法是實現僅對最近的表格行起作用的按鈕。 – jahroy

可以使用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-22 02:02:38 Jasen

好的，那麼我如何給它添加警報，並確保它只觸發一次。 – user1206480

只有按鈕實例點擊了。與選擇器*匹配的所有按鈕都可以執行事件處理程序。 – Jasen

對不起，我沒有清楚地解釋自己。我不希望其他匹配選擇器只是在實際點擊選擇器的情況下執行事件處理程序（如果可能的話）。 – user1206480

如果你有2種方法可以添加一個唯一的ID通過添加功能的按鈕。

如果你願意使用jQuery UI，那麼有一個uniqueId（）函數將爲你的按鈕指定一個唯一的id。 http://api.jqueryui.com/uniqueId/

Ex。 $(curButton).uniqueId()

您自己創建一個新的唯一ID。

Ex。

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

來源

2013-05-22 02:07:58 jrose

有沒有辦法從同名的頁面上的其他按鈕隔離按鈕

回答

相關問題