1

我对与 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 一起处理类属性。

任何人都可以为我解释一下吗？

谢谢！

4

4 回答 4

4

getElementsByClassName返回一个类似数组的集合（技术上是 a 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");
});

PS为了提高性能，记得缓存你的选择器：

var $dialog = $("#dialog-form");
$(".create-user").click(function() {
    $dialog.dialog("open");
});
于 2013-01-08T19:14:46.500 回答
0

看来您正在将常规 JavaScript 与 jQuery 混为一谈。考虑到您实际上正在使用 jQuery，替换var btn = document.getElementsByClassName("create-user");为应该可行。var btn = $(".create-user");

于 2013-01-08T19:14:48.173 回答
0

runningdocument.getElementsByClassName("create-user");将返回一个类似数组的 NodeList 对象。相反，请尝试：

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

然后btn会有一个click方法（假设你使用的是jQuery）；

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

于 2013-01-08T19:16:39.300 回答
0

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>
于 2013-01-08T19:18:11.417 回答