0

Is it necessary to use $(document).ready() when using $().bind??

HTML part:

<head>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="test.js"></script>
    <link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<div style=''>
    <input type="text" id="sendie" value="Type your reply here and press Enter" class="inputBox"/>
</div>
</body>

JS PART

$("#sendie").bind("click",function(){
    console.log('log');
});

These are the two pieces of code I'm using to test. If I wrap the js part with $(document).ready, it works fine though.

The reason I'm worried is that I will be doing a lot of keyboard + mouse bindings on different elements and if I have to write a $().ready all the time, it will be tedious(though I don't mind doing that but I am just curious ).

Is $(document).ready necessary?

I went through the above post and it says, $().ready is not necessary if the ext js file is added before body tag, but I still can't do without it. Please help.

Mayur Buragohain
  • 1,199
  • 17
  • 33
  • when are you calling the js? – Daniel A. White Nov 06 '13 at 18:45
  • 1
    Move test.js include to end of the body i.e. just before the

    . $(document).ready is not necessary but for the bind to work the element should exist. So you have to execute the script after the element has been rendered.

     – amit_g Nov 06 '13 at 18:45
  • You need `$(document).ready()` because that gets called once the DOM is ready. You can't bind to elements that don't exist yet. If your code comes *after* the elements, then they will exist, but if your code is in the ``, then you need it. – Rocket Hazmat Nov 06 '13 at 18:45
  • You don't need to wrap everything *individually* if that's what you're afraid of. Just put everything you have inside *one* document.ready event. – JJJ Nov 06 '13 at 18:49

3 Answers3

4

This expression...

$("#sendie")

... attempts to look for an element with ID equal to 'sendie' in the existing DOM. If it's not there (yet), the resulting jQuery object will be empty - and will the corresponding element appear there or not, doesn't matter at all, as jQuery doesn't predict the future.

So the alternatives you have are...

... collect all the functions you call into a bigger function (or an object with init method), then call this big function (object.init()) on dom.ready. That's not necessary (and that's what jQuery does behind the scene), but it might help you to organize your code better.

... use delegation: bind all the event handlers to document, then route the actions within that 'meta-handler'. Again, this is helpful only when this meta-handler is a very thin 'router' layer, and the real actions are done in the corresponding modules/methods.

raina77ow
  • 91,589
  • 12
  • 180
  • 210
  • There is a shortcut for `$(document).bind("ready", ...)`, which is simply `$(...)`. SO everything can just be wrapped inside one huge `$(function () { /* code here */ });`. Not really much additional code ;) – Johannes H. Nov 06 '13 at 18:55
  • @JohannesH. 'bind all the event handlers' != 'bind ready event handler', if you're about the second way. For the first one, yes, definitely, if there's a single file only. If it's more then one file, one can define a module for each of those files, then call all those modules' inits in this bigger function - that may or may not be actually located in another file. ) – raina77ow Nov 06 '13 at 18:56
  • @raina77ow - can you give me some links so that i can learn about these two alternatives. The problem was solved by including the js file just before `

    `

     – Mayur Buragohain Nov 06 '13 at 18:58
  • @MayurBuragohain For the module pattern, I'd suggest checking [this wonderful book](http://addyosmani.com/resources/essentialjsdesignpatterns/book/) written by Addy Osmani (in fact, reading it would be worth your time in any case). For event delegation, check [this extensive answer](http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) - it's more about JS in general, but I guess knowing the details is really helpful in this case. – raina77ow Nov 06 '13 at 19:01
  • @raina77ow Thanks..!! – Mayur Buragohain Nov 06 '13 at 20:00
4

Your problem doesn't have anything to do with bind - it's the jQuery selection that doesn't work before the document is fully loaded. The reason for this is simple: code that is directly executed inside a script tag gets executed the moment it is loaded. As the <script> is in the head, it's before any contents of the body. Therefore, when your code is executed, there is no #sendie yet - so you cannot set its click handler.

Johannes H.
  • 5,554
  • 1
  • 18
  • 39
1

You don't need it if you include your js script at the end of your page(so the DOM elements are already loaded):

<script type="text/javascript" src="test.js"></script>
</body>
Nelson
  • 43,933
  • 8
  • 62
  • 77