ASP.NET JavaScript from MasterPage doesn't work_问答_开发者

ASP.NET JavaScript from MasterPage doesn't work

开发者 https://www.devze.com 2023-01-18 17:04 出处：网络

I put common(for all my content pages) js to head section at my masterpage. <head runat=\"server\">

I put common(for all my content pages) js to head section at my masterpage.

<head runat="server">
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>    
<script type="text/javascript" src="../Scripts/jquery.corner.js?v2.11"></script>
<script type="text/javascript" src="../Scripts/jquery.timers.js"></script>
<开发者_开发技巧script type="text/javascript" language="javascript">
        var mouseOver = false;
        $('.right_menu_links').hover(
          function () {
              var visible = $(this).parent().children(".right_menu_hint").css("display");
              mouseOver = true;
              if (visible == 'none') {
                  $(this).oneTime("1s", function () {
                      if (mouseOver)  
                        $(this).parent().children(".right_menu_hint").show("slow");
                  });
              }
          },
          function () {
              mouseOver = false;
              $(this).parent().children(".right_menu_hint").hide("slow");
          }
        ); 
</scipt>

AS I expect, at all my content pages script should attach hover event to all to all right_menu_links. But it doesn't work.

When I place the same script at my content pages all is work! What's wrong?

It needs to be wrapped in a function that is called when the DOM has loaded.

<script type="text/javascript" language="javascript">
    var mouseOver = false;
    $(function(){
        $('.right_menu_links').hover(
          function () {
              var visible = $(this).parent().children(".right_menu_hint").css("display");
              mouseOver = true;
              if (visible == 'none') {
                  $(this).oneTime("1s", function () {
                      if (mouseOver)  
                        $(this).parent().children(".right_menu_hint").show("slow");
                  });
              }
          },
          function () {
              mouseOver = false;
              $(this).parent().children(".right_menu_hint").hide("slow");
          }
      ); 
    }
</scipt>

It didn't work because when the Javascript got executed, the content in the body is not yet available. Use the following structure to have your Javascript executed once the document body is ready.

$(function() {
    // you Javascript here.
})

You code has execute once the DOM is ready. JQuery has a method called Ready that does this for you. Just change your code to this:

$(document).ready(function(){
   var mouseOver = false;
        $('.right_menu_links').hover(
          function () {
              var visible = $(this).parent().children(".right_menu_hint").css("display");
              mouseOver = true;
              if (visible == 'none') {
                  $(this).oneTime("1s", function () {
                      if (mouseOver)  
                        $(this).parent().children(".right_menu_hint").show("slow");
                  });
              }
          },
          function () {
              mouseOver = false;
              $(this).parent().children(".right_menu_hint").hide("slow");
          }
        ); 
}

My guess is that your problem is here

<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>    
<script type="text/javascript" src="../Scripts/jquery.corner.js?v2.11"></script>
<script type="text/javascript" src="../Scripts/jquery.timers.js"></script>

If master page and content pages are in different locations then javascript can not be found.

For example your master page is in http://mysite.com/masterpages/root.master And page is http://mysite.com/default.aspx it will not work.

Put an absolute path (http://mysite.com/Scripts/jquery-1.4.1.js ) or root relative path (/Scripts/jquery-1.4.1.js).

add language="javascript" at every link

<script language="javascript"  type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>    

<script language="javascript" type="text/javascript" src="../Scripts/jquery.corner.js?v2.11"></script>

<script language="javascript" type="text/javascript" src="../Scripts/jquery.timers.js"></script>

now try again