Question about accessing DOM via jQuery

[cancer10]

Hi

Can someone please tell me why does the following code snippet does NOT work

http://jsbin.com/izuzud/1/edit

But the following works?

http://jsbin.com/efujar/1/edit

The code is exactly the same same except the position.

[Jeff Mott]

Browsers execute code immediately as it becomes available. That means that in your first snippet, you're trying to select the button before the browser has reached the button markup.

[cancer10]

Browsers execute code immediately as it becomes available. That means that in your first snippet, you're trying to select the button before the browser has reached the button markup.

In that case, should not the onclick button event should trigger the "Hello World" text after the browser has rendered all the DOM elements?

[Jeff Mott]

In the first snippet, the click event is never attached, because there's no button yet to attach it to.

[cancer10]

In the first snippet, the click event is never attached, because there's no button yet to attach it to.

Isn't this how you attach a click event?

$('#mybutton').click(function(){
//my code here
});

[Jeff Mott]

Yes, but only if the element you're selecting exists in the DOM. In your first snippet, you're trying to select the button before the browser has reached the markup, so the button isn't in the DOM yet.

[cancer10]

Yes, but only if the element you're selecting exists in the DOM. In your first snippet, you're trying to select the button before the browser has reached the markup, so the button isn't in the DOM yet.

ok but how come the same snippet works if i wrap it inside a $(document).ready() event?

[Jeff Mott]

Because that delays your code from executing until the DOM has been fully loaded.

[cancer10]

I see but I thought the following two are the same:

$(document).ready(function(){

});

AND

(function(){

})(jQuery);

[Jeff Mott]

Probably the second form you're thinking of is:

jQuery(function ($) {

});

[cancer10]

ok but the question is, are the following both the same?

$(document).ready(function(){

});

and

jQuery(function ($) {

});

[Jeff Mott]

Yes.