Question

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

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

<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>

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

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

我预计对话框会打开，但没有回应。这是我第一次使用javascript处理class属性。

有人可以为我解释一下吗？

谢谢！

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");
});

P.S。为了提高性能，请记住缓存选择器：

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

Answer 2

您似乎正在将常规JavaScript与jQuery混合使用。使用var btn = document.getElementsByClassName("create-user");取代var btn = $(".create-user");应该有效，因为您实际上正在使用jQuery。

Answer 3

运行document.getElementsByClassName("create-user");将返回类似数组的NodeList对象。相反，尝试：

var btn = $('.create-user');

然后btn会有click方法（假设您使用的是jQuery）;

此外，请尝试使用Firebug或Web开发人员控制台查看有关JavaScript错误的信息。

Answer 4

jQuery最适合这个：http://www.jquery.com

下载jQuery并将其包含在您的文件中。

然后你的代码看起来像这样：

<script type="text/javascript">
   //When document loads add to all create-user buttons
   $(document).ready(function(){
     $(".create-user").click(function() {
        $("#dialog-form").dialog("open");
     });
   });
</script>

如何添加一个按钮（带有class属性）点击javascript中的回调

4 个答案: