Question about accessing DOM via jQuery

cancer10 · 10-23-2012, 02:30 AM

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.

VIPStephan · 10-23-2012, 09:40 AM

This is because you are executing the script before the element is even existing. If you include the script in the head you need to wait for the DOM to be loaded. Have you confused the self-invoking function with the jQuery DOM ready function or why are you using it?

PHP Code:


			
$(function(){
  $('#mybutton').click(function(){
    var a = $('#mydiv').text();
    alert(a);
  });
});

The self-invoking function isn’t even necessary, if you put the script at the end of the document you can even do

PHP Code:


			
<script type="text/javascript">
$('#mybutton').click(function(){
  var a = $('#mydiv').text();
  alert(a);
});
</script>

devnull69 · 10-23-2012, 09:46 AM

Both code samples contain the following construct

Code:

(function() {
   ...
})(jQuery);

which doesn't make any sense in that case. It creates an anonymous function with no parameter which will be immediately called with the parameter jQuery. The parameter will not be matched to anything so it will be lost.

The position of the code matters in that case because the function will be executed immediately and the element '#mybutton' will only exist before the end of the <body>

This is probably what you wanted to do instead

Code:

$(function() {
   ...
});