Question

我正在使用服务器端技术（JSP）来呈现我的视图。因此，我有一个for循环遍历列表。现在，我想将一个单击侦听器绑定到为列表中的每个项呈现的按钮。点击监听器中的代码需要项ID，我不明白如何传递给JavaScript代码。

如果问题与解决方案有关，我也会使用requirejs。

Answer 1

也许你只是不需要将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');

Answer 2

在大多数事件处理程序中，this是触发事件的DOM节点，因此像这样的工作：

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

Answer 3

这是直播example 如果你使用jQuery和requirejs，这将是这样的：

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

如何将动态值传递给事件侦听器

3 个答案: