Question

I have a question regarding the html class attribute interactive with the javascript call back.

Suppose I have a table and each row has a button like this:

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

Notice that the button has a class attribute as “create-user”. Now I want to add the same callback for each button with this:

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

I expected the dialog-form will open up but there is no response. This is my first time to deal with the class attribute along with javascript.

Can anyone shed some light for me?

Thanks!

Answer 1

getElementsByClassName returns an array-like collection (technically a nodeList). To add an event handler to your elements, you’ll have to loop through them:

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

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

However, since you’re using jQuery, you should use jQuery to select your elements, which won’t require an explicit loop:

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

---

P.S. For increased performance, remember to cache your selectors:

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