如何動態值傳遞給事件偵聽器

我使用的是服務器端技術（JSP）來呈現自己的看法。因此我有一個for循環遍歷一個列表。現在，我想要將點擊監聽器綁定到爲列表中的每個項目呈現的按鈕。點擊監聽器中的代碼需要項目ID，我不明白如何傳遞給JavaScript代碼。如何動態值傳遞給事件偵聽器

我也用requirejs，如果這個問題到解決方案。

來源

2012-11-26 LuckyLuke

你可以發佈您對循環的代碼，以及如何你有ID的項目定義？ – Cerbrus

也許你並不需要的HTML ID傳遞到您的JavaScript。你可以使用一個CSS類來檢索你的DOM中的按鈕。 JavaScript代碼取決於您使用的框架。

在本地JavaScript，你可以檢索你的按鈕是這樣的：

var buttons = document.querySelectorAll('button.my_class');

通過你想要什麼只需更換my_class。

你可以這樣做訪問按鈕ID：

var button_id = buttons[0].id

如果你想在項目ID附加到按鈕，你可以使用一個data屬性。例如：

<button id="my_button" data-id="item_id" />

在JavaScript中，你可以訪問到data_id這樣的：

var item_id = buttons[0].getAttribute('data-id');

來源

2012-11-26 08:55:02 Magus

如果我使用'數據id'屬性，是否會打破舊的瀏覽器什麼？我是否可以自由添加這樣的屬性，我之前沒有看到過，所以我必須問。 – LuckyLuke

它適用於所有最近的瀏覽器和所有IE7 +完美。我認爲它也適用於IE6，但我從未測試過它自己。 – Magus

data-id是HTML規範中的一個屬性嗎？或者你只是自己製造這樣的屬性？ – LuckyLuke

在大多數事件處理程序，this是觸發事件的DOM節點，所以像這樣的工作：

button.onclick = function() { 
    alert(this.id); 
}

來源

2012-11-26 09:05:17 David

這裏是現場example 如果您正在使用jQuery和requirejs這將是這樣的：

require(['jQuery'], function ($) { 
    $('.container_element').on('click', '.button_class', function() { 
     console.log('You have clicked button with id ', $(this).attr('id')); 
    }) 
})

來源

2012-11-26 09:08:48 AlexandruSerban

如何動態值傳遞給事件偵聽器

回答

相關問題