Does the location of script matter in Jquery?

Question

Could someone tell me if the location of the script tag matters while using JQuery?

For example:

<script>
 $("a").click(function(event) {
   event.preventDefault();
   $('<div/>')
      .append('default ' + event.type + ' prevented')
      .appendTo('#log');
 });
</script>

<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>

The above code does not work as needed but the following works,

<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>
<script>
$("a").click(function(event) {
   event.preventDefault();
   $('<div/>')
      .append('default ' + event.type + ' prevented')
      .appendTo('#log');
});
</script>

Why did the second one work? Is it because the code is working serially, top to bottom? Also, if the first code is inside .ready(), then the position does not matter.

Darin Dimitrov · Accepted Answer · 2011-08-15 15:08:24Z

5

The location does matter. In the first case you are placing the script before the DOM element meaning that you need to wrap it in a document.ready handler otherwise at the moment you are attaching the .click handler the anchor doesn't yet exist. Here's how you could wrap the script into a document ready meaning that the .click handler will be attached only when the full DOM is loaded and ready to be manipulated:

<script>
$(function() {
    $("a").click(function(event) {
        event.preventDefault();
        $('<div/>')
            .append('default ' + event.type + ' prevented')
            .appendTo('#log');
    });
});
</script>

<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>

Placing the script at the end of the document (just before the closing <body> tag) is also a good practice (actually it is one of the recommendations of Best Practices for Speeding Up Your Web Site) and in this case you don't need to wrap it in a document.ready.

answered Aug 15, 2011 at 15:08

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Harke Over a year ago

Thanks for the reply. So, which one is better, using the .ready() and putting the script at the beginning or writing the script at the end of the code?

Darin Dimitrov Over a year ago

@Harke, putting the script at the end of the document is the recommended practice.

maxedison · Accepted Answer · 2011-08-15 15:13:19Z

The element that the jQuery is binding to (in this case, binding the "click" event to the "a" tag) must already be loaded in the DOM. Otherwise, when the JS runs, that "a" element won't exist yet.

There are three possible solutions to this:

Solution 1
Put the jQuery at the end of the document, like in your second example.

Solution 2
Wrap the JS code in the $(document).ready() function, such as

$(document).ready(function(){
   //the rest goes in here
});

Solution 3
A final option is to use the .live() method of jQuery, which will bind the event to any DOM elements that are created both before and after the .live() method is called. For example, if your first code snippet (that runs the JS prior to the loading of the "a" element) were changed to

$('a').live('click',function(){
    //click event action
});

that would work as well. However, this third option is the least desirable, since .live() definitely forces the browser to do more work by always paying attention to when a new element is created. Either of the previous two options is definitely preferable.

Marc B · Accepted Answer · 2011-08-15 15:09:48Z

0

The contents of script tags are executed at the moment they're are encounted by the browser while it's parsing the page. In your first example, the code comes before the HTML. When the script executes, the HTML containing yhour <a> and <div> has not yet been parsed by the browser, so you $('a') fails, because the a doesn't exist yet.

The second version works, because the <a> has already been loaded/parsed and is present in the page's DOM.

To get around this, there is the .ready() function, which allows you to register some code to be executed, but only after the page's full DOM is ready and available for use.

$(document).ready(function() {
    ...  your code here ...
});

answered Aug 15, 2011 at 15:09

Marc B

362k44 gold badges433 silver badges508 bronze badges

Comments

circusdei · Accepted Answer · 2011-08-15 15:10:04Z

0

In the first examle, your code is being executed before the element exists. You can do one of two things:

1) Do it like in the second example.

2) Use the following instead of .click()

$("a").live('click',function(){
    // do stuff here
});

This will bind all anchors (new and old) to the "stuff" inside the function. It won't matter that the element hasn't been added to the DOM yet.

answered Aug 15, 2011 at 15:10

circusdei

1,96712 silver badges29 bronze badges

2 Comments

canon Over a year ago

It's worth noting that live() differs from bind(). Have a look at the caveats section: api.jquery.com/live

Harke Over a year ago

Thanks for the reply. Is it better to use the .live() or .ready()?

ShankarSangoli · Accepted Answer · 2011-08-15 15:10:11Z

0

Try this, you need to wait untill the dom is ready.

$(function() {
  $("a").click(function(event) {
    event.preventDefault();
    $('<div/>')
       .append('default ' + event.type + ' prevented')
       .appendTo('#log');
 });
});

answered Aug 15, 2011 at 15:10

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Collectives™ on Stack Overflow

Does the location of script matter in Jquery?

5 Answers 5

2 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related