ansaurus

Question

Answer 1

+1 A:

You need to bind the click handler when the DOM is ready:

$(function() {
    $("button").bind("click", function() {
        alert("You clicked " + $(this).attr("id"));
    });
});

Darin Dimitrov 2009-10-20 18:39:25

This is unrelated to the question.

Alex Sexton 2009-10-20 18:43:15

Why wouldn't it be?

Darin Dimitrov 2009-10-20 18:47:01

Is it just me or is this answer identical to Alex's? The only difference is `$(document).ready(function(){` and `$(function(){` But they both do the **exact same thing**.

brianpeiris 2009-10-20 19:03:12

Yes, both do absolutely the same thing.

Darin Dimitrov 2009-10-20 19:08:07

At the time I made that comment, the code block was different. Now this is correct (after an edit), it uses the shortcut document ready function.

Alex Sexton 2009-10-20 19:11:31

Answer 2

+5 A:

Try:

 $(document).ready(function() {
    $("button").bind("click", function() {
       alert("You clicked " + $(this).attr("id"));
    });
 });

Edit: As stated by Alex Sexton, the use of live instead of bind is also preferable when you have to apply the same function to more than 2 elements of the same type.
Follow the link for more infos, credits to him.

Alex Bagnolini 2009-10-20 18:40:43

Yea, this gets at the heart of the problem. The document is not ready. Another solution would be to simply put the block of javascript at the bottom of the page instead of the top.

Alex Sexton 2009-10-20 18:42:39

Answer 3

A:

Because your javasript code is executed before html body is loaded. You should call your JS after html is fully loaded. You can do it so:

$(function() { // it's called when document loads
    $("button").bind("click", function() {
        alert("You clicked " + $(this).attr("id"));
    });
});

But it's good practice not to inject your code into global scope. You can do it so:

(function() { // it helps you not to inject your code into global scope
    $(function() { // it's called when document loads
        $("button").bind("click", function() {
            alert("You clicked " + $(this).attr("id"));
        });
    });
})();

giolekva 2009-10-20 18:43:41

Your first code block does not inject anything into the global scope, so your second code block is redundant

brianpeiris 2009-10-20 19:01:25

You are right in this situation, but for more complicated situations where it's needed global variables and so on it's better practice to create your own scope and write code inside it. I think using such approach even is such cases is better.

giolekva 2009-10-20 19:27:11

I'd have to disagree with you giolekva. The only way you would leak inside of the function prior to wrapping it with another function is by declaring a global variable. Wrapping it in a function wouldn't help you, no matter how many times you do it.

Alex Sexton 2009-10-20 19:29:44

I'm not JS geek and maybe you're right, but I've learnt it from one of the speeches by John Resig who's author of jQuery.

giolekva 2009-10-20 19:48:58

Answer 4

+1 A:

Another solution would be to use event delegation, so it doesn't matter that the buttons don't exist yet.

$("button").live("click", function() {
    alert("You clicked " + $(this).attr("id"));
});

Alex Sexton 2009-10-20 19:14:19

This has the added benefit of performing better in situations where there are multiple buttons (according to http://paulirish.com/perf/ any more than 3 elements with the same handler would have improved speed with $.live).

Alex Sexton 2009-10-20 19:35:23

ansaurus

tags:

views:

answers:

Multiple buttns on a page - not working

related questions