CODEWITHSUNDEEP
javascriptjquery
nrs jayaram
nrs jayaram

Reputation: 3448

Javascript tag not running if i change position

I have a sample page, in this page js inserted out of body tag so it will not work. but if u write script before body end tags then it will work. I don't know why it happens, other scripts are working fine in different file.

Sample Code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mouseover demo</title>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  <script>
    $( "div[class^=star]" )
    .mouseover(function() {
    $( this ).find( "span" ).text( "mouse Over" );  
    })
    .mouseout(function() {
    $( this ).find( "span" ).text( "mouse Out" );   
    }); 
  </script>
</head>
<body>
<table><tr><td>
    <div class="staroverout">
        <span>move cursor to change text</span>
    </div>
    <br>
    <div class="staroverout">
        <span>move cursor to change text</span>
    </div>
    <br>
    <div class="nstaroverout">
         <span>move cursor to change text</span>
    </div>
</td></tr></table>
</body>
</html>

Upvotes: 0

Views: 89

Answers (3)

Ludovic Feltz
Ludovic Feltz

Reputation: 11916

The problem here is that your DOM isn't loaded when you are trying to select it. You have to use $(document).ready() to be sure the page is loaded before you execute your code.

Wrap your code like this:

$(document).ready(function () {
    $( "div[class^=star]" )
       .mouseover(function() {
           $( this ).find( "span" ).text( "mouse Over" );  
       })
       .mouseout(function() {
           $( this ).find( "span" ).text( "mouse Out" );   
       }); 
}

Upvotes: 2

Hussy Borad
Hussy Borad

Reputation: 583

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mouseover demo</title>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  <script>
 $(window).ready(function() {
    $( "div[class^=star]" )
    .mouseover(function() {
    $( this ).find( "span" ).text( "mouse Over" );  
    })
    .mouseout(function() {
    $( this ).find( "span" ).text( "mouse Out" );   
    }); 
});
  </script>
</head>
<body>
<table><tr><td>
    <div class="staroverout">
        <span>move cursor to change text</span>
    </div>
    <br>
    <div class="staroverout">
        <span>move cursor to change text</span>
    </div>
    <br>
    <div class="nstaroverout">
         <span>move cursor to change text</span>
    </div>
</td></tr></table>
</body>
</html>

Upvotes: 1

devqon
devqon

Reputation: 13997

You should wrap the javascript code in the jQuery document ready function:

$(function(){
    // your code
    $( "div[class^=star]" )
        .mouseover(function() {
            $( this ).find( "span" ).text( "mouse Over" );  
        })
        .mouseout(function() {
            $( this ).find( "span" ).text( "mouse Out" );   
        }); 
});

Upvotes: 0

Related Questions