javascript - 如何在javascript中添加一个按钮(带有类属性)点击回调

Question

我有一个关于与 javascript 回调交互的 html 类属性的问题。

假设我有一个表格，每一行都有一个这样的按钮:

<table border="0">
<?php foreach ($itemlist as $item => $value): ?>
    <tr>
        <td><?php echo $item;?></td>
        <td><button class="create-user">Test</button></td>
    </tr>
<?php endforeach; ?>
</table>

请注意，该按钮的类属性为“create-user”。现在我想为每个按钮添加相同的回调:

var btn = document.getElementsByClassName("create-user");
btn.click(function() {
    $("#dialog-form").dialog("open");
});

我预计对话框会打开，但没有任何响应。这是我第一次与 javascript 一起处理类属性。

谁能给我一些启发？

谢谢!

Answer 1

getElementsByClassName 返回一个类似数组的集合(技术上是一个 nodeList)。要向您的元素添加事件处理程序，您必须循环遍历它们:

var buttons = document.getElementsByClassName("create-user");
var count = buttons.length;

while ( count-- ) {
    buttons[ count ].onclick = function () {
        $("#dialog-form").dialog("open");
    };
}

但是，由于您使用的是 jQuery，因此您应该使用 jQuery 来选择您的元素，这不需要显式循环:

$(".create-user").click(function() {
    $("#dialog-form").dialog("open");
});

---

附言为了提高性能，请记住缓存您的选择器:

var $dialog = $("#dialog-form");
$(".create-user").click(function() {
    $dialog.dialog("open");
});