SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Question Question about accessing DOM via jQuery

    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.

  2. #2
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,313
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    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.
    "First make it work. Then make it better."

  3. #3
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jeff Mott View Post
    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?

  4. #4
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,313
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    In the first snippet, the click event is never attached, because there's no button yet to attach it to.
    "First make it work. Then make it better."

  5. #5
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jeff Mott View Post
    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
    });

  6. #6
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,313
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    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.
    "First make it work. Then make it better."

  7. #7
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jeff Mott View Post
    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?

  8. #8
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,313
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    Because that delays your code from executing until the DOM has been fully loaded.
    "First make it work. Then make it better."

  9. #9
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I see but I thought the following two are the same:

    $(document).ready(function(){

    });
    AND

    (function(){

    })(jQuery);

  10. #10
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,313
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    Probably the second form you're thinking of is:

    Code:
    jQuery(function ($) {
    
    });
    "First make it work. Then make it better."

  11. #11
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    752
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ok but the question is, are the following both the same?

    $(document).ready(function(){

    });

    and

    jQuery(function ($) {

    });

  12. #12
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,313
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    Yes.
    "First make it work. Then make it better."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •