Does the location of script matter in Jquery?_问答_开发者

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 ' + e开发者_运维技巧vent.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.

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.

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.

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 ...
});

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.

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');
 });
});