Question

我将常用（对于我的所有内容页面）js放在我的母版页的头部。

<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>

正如我所料，在我的所有内容页面中，脚本应将悬停事件附加到所有right_menu_links。但它不起作用。

当我在我的内容页面放置相同的脚本时，一切正常！怎么了？

Answer 1

它不起作用，因为当Javascript执行时，正文中的内容尚不可用。使用以下结构在文档正文准备就绪后执行Javascript。

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

Answer 2

一旦DOM准备好，您的代码就会执行。 JQuery有一个名为Ready的方法可以为您完成此任务。只需将您的代码更改为：

$(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");
          }
        ); 
}

Answer 3

它需要包装在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>

Answer 4

我的猜测是你的问题在这里

<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>

如果母版页和内容页位于不同位置，则无法找到javascript。

例如，您的母版页位于 http://mysite.com/masterpages/root.master 页面 http://mysite.com/default.aspx 它不起作用。

放置绝对路径（http://mysite.com/Scripts/jquery-1.4.1.js）或根相对路径（/Scripts/jquery-1.4.1.js）。

Answer 5

在每个链接添加language="javascript"

<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>

现在再试一次

MasterPage中的ASP.NET JavaScript不起作用

5 个答案: