堆栈内存溢出
  繁体   English   中英

jQuery document.ready无法正常工作

[英]jQuery document.ready not working

 原文  2012-09-13 00:26:20  0   1    javascript/ jquery

问题描述

我已经为此工作了几天，一直无法找到解决方案。 基本上，我必须脑子里的JS脚本不会执行$(document).ready(...) 。 奇怪的是，我还有其他可以使用它的脚本。 这是我遇到的两个问题：（我对尝试过的内容添加了一些评论） 

<% content_for(:head) do %>
<script type="text/javascript">
    $(document).ready(function() {
        $('.button-print-ticket').click(function(e) {
            e.preventDefault();
            var header = $('.social-header');
            header.queue(function() {
              var search_string ='#map-canvas img[src=https://maps.gstatic.com/mapfiles/google_white.png]';
              var glink = $(search_string).parent().parent();
              glink.replaceWith(glink.html());
              $(this).dequeue();
            });
            header.hide();
            header.queue(function() {
              window.print();
              $(this).dequeue();
            });
            header.queue(function() {
              $('.social-header').show();
              $(search_string).parent().replaceWith(glink);
              $(this).dequeue();
            });
        });
    });
</script>
<script type="text/javascript">
//an alert here works
if(screen.width >= 800) {
  //an alert here works too
  $(document).ready(function() {
    //an alert here only works in the console
    $(document).ready(function(){
      $('#overlay').fadeIn('fast',function(){
          $('#box').animate({'top':'160px'},500);
      });
    });
    $('#boxclose, #bt-fbshare, #bt-tweet, #bt-email').click(function(){
        $('#box').hide("drop", { direction: "up" }, 100, function(){
            $('#overlay').fadeOut('fast');
        });
    });
    $(document).keyup(function(e) {
      if (e.keyCode == 27){
         $('#box').hide("drop", { direction: "up" }, 100, function(){
             $('#overlay').fadeOut('fast');
         });
      }
    });

  });
}
</script>
<% end %>

我还包括了Ruby On Rails标记，因为它是我可以识别的唯一区别。 （Firebug中显示了JS IS） <body>标记中也没有onload 。 另一个奇怪的是，它曾经可以工作，我不记得对这两个脚本进行任何更改。

编辑2：另一件事：我也可以将console.log($)放在if (screen-width >= 800) ，它告诉我$是一个函数。

编辑：这是生成的HTML： 

<head>
<style type="text/css">@media print {  .gmnoprint {    display:none  }}@media screen {  .gmnoscreen {    display:none  }}</style>
<title>Web Page</title>

<meta content="text/html;charset=UTF-8" http-equiv="content-type"/>
<meta content="ALL" name="robots"/>
<meta content="5 Days" name="revisit-after"/>
<meta content="EN" name="language"/>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0"/>


<link type="text/css" rel="stylesheet" media="screen, projection, print" href="/stylesheets/screen.css?1347374478"/>
<link type="text/css" rel="stylesheet" media="screen, projection, print" href="/stylesheets/global.css?1346943598"/>
<link type="text/css" rel="stylesheet" media="print" href="/stylesheets/print.css?1343928684"/>

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lte IE 7]><link href="/stylesheets/ie7.css?1343928684" media="screen, projection" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if !IE]><link href="/stylesheets/media.css?1343928684" media="screen, projection" rel="stylesheet" type="text/css" /><![endif]-->

<script type="text/javascript" src="/javascripts/jquery.min.js?1343928684"></script>
<script type="text/javascript" src="/javascripts/jquery.ui.min.js?1343928684"></script>
<script type="text/javascript" src="/javascripts/jquery.ajax-submit.js?1343928684"></script>
<script type="text/javascript" src="/javascripts/modernizr-2.js?1343928684"></script>
<script type="text/javascript" src="/javascripts/date.format.js?1343928684"></script>
<script type="text/javascript" src="/javascripts/geo.js?1343928684"></script>
<script type="text/javascript" src="/javascripts/spin.min.js?1343928684"></script><style></style>
<script type="text/javascript" src="/javascripts/application.js?1347326686"></script>
<script type="text/javascript" src="/javascripts/global.js?1345692570"></script>

<script type="text/javascript">
    var logged_in = true;

    $(function() {
        if (logged_in) {
            $('.signed-in').show();
            $('.signed-out').hide();
        } else {
            $('.signed-in').hide();
            $('.signed-out').show();
        }

        $('.sign-out-link').click(function(e) {
            e.preventDefault();
            $('.signed-in').hide();
            $('.signed-out').show();
            logged_in = false;e
            window.location='/customers/destroy_session';
        });
    });
</script>
<!--<script type="text/javascript">

document.write(unescape("%3Cscript src='" + ((document.location.protocol=="https:")?"https://snapabug.appspot.com":"http://www.snapengage.com") + "/snapabug.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">

SnapABug.addButton("--------","0","55%");

</script>-->

<style type="text/css">
    #map-canvas { width : 100%; height: 100%; }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=true" type="text/javascript"></script><script type="text/javascript" src="https://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/14/main.js"></script>
<script src="/javascripts/google.maps.styled-marker.js" type="text/javascript"></script>
<script type="text/javascript">

    var directionsDisplay;  
    var directionsService = new google.maps.DirectionsService();
    var venueMarker = new google.maps.Marker;
    var pu_map;

    var map;
    $(function() {
        var latlng = new google.maps.LatLng(40.256676, -111.644755);
        var mapOptions = {
            zoom                : 13,
            center              : latlng,
            mapTypeId           : google.maps.MapTypeId.ROADMAP,
            disableDefaultUI    : true,
            zoomControl         : true
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

        new google.maps.Marker({
            position : latlng,
            map : map
        });

    });

    $(function() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var latlng = new google.maps.LatLng(40.256676, -111.644755);
        var mapOptions = {
            zoom                : 13,
            center              : latlng,
            mapTypeId           : google.maps.MapTypeId.ROADMAP,
            disableDefaultUI    : true,
            zoomControl         : true
        };
        pu_map = new google.maps.Map(document.getElementById("popup_map_cont"), mapOptions);
        directionsDisplay.setMap(pu_map);
    });

</script>



<script type="text/javascript">
    $(document).ready(function() {
        $('.button-print-ticket').click(function(e) {
            e.preventDefault();
            var header = $('.social-header');
            header.queue(function() {
                var search_string ='#map-canvas img[src=https://maps.gstatic.com/mapfiles/google_white.png]';
                var glink = $(search_string).parent().parent();
                glink.replaceWith(glink.html());
                $(this).dequeue();
            });
            header.hide();
            header.queue(function() {
                window.print();
                $(this).dequeue();
            });
            header.queue(function() {
                $('.social-header').show();
                $(search_string).parent().replaceWith(glink);
                $(this).dequeue();
            });
        });
    });
</script>
<script type="text/javascript">
    if(screen.width >= 800) {
        $(document).ready(function() {
            $(document).ready(function(){
                $('#overlay').fadeIn('fast',function(){
                    $('#box').animate({'top':'160px'},500);
                });
            });
            $('#boxclose, #bt-fbshare, #bt-tweet, #bt-email').click(function(){
                $('#box').hide("drop", { direction: "up" }, 100, function(){
                    $('#overlay').fadeOut('fast');
                });
            });
            $(document).keyup(function(e) {
                if (e.keyCode == 27){
                    $('#box').hide("drop", { direction: "up" }, 100, function(){
                        $('#overlay').fadeOut('fast');
                    });
                }
            });

        });
    }
</script>

<script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/14/%7Bcommon,util,marker%7D.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/14/%7Bmap%7D.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/14/%7Bonion%7D.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/14/%7Bcontrols%7D.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/9/14/%7Bstats%7D.js"></script><script async="true" type="text/javascript" src="http://a.adroll.com/j/roundtrip.js"></script>

1 个解决方案

解决方案1
 0  2012-09-13 00:47:11

也许您应该尝试将所有JS代码放入相同的标记脚本和$（document）.ready（）函数中 

<% content_for(:head) do %>
<script type="text/javascript">
    $(document).ready(function() {
        $('.button-print-ticket').click(function(e) {
            e.preventDefault();
            var header = $('.social-header');
            header.queue(function() {
              var search_string ='#map-canvas img[src=https://maps.gstatic.com/mapfiles/google_white.png]';
              var glink = $(search_string).parent().parent();
              glink.replaceWith(glink.html());
              $(this).dequeue();
            });
            header.hide();
            header.queue(function() {
              window.print();
              $(this).dequeue();
            });
            header.queue(function() {
              $('.social-header').show();
              $(search_string).parent().replaceWith(glink);
              $(this).dequeue();
            });
        });
        if(screen.width >= 800) {
            $('#overlay').fadeIn('fast',function(){
                $('#box').animate({'top':'160px'},500);
            });
            $('#boxclose, #bt-fbshare, #bt-tweet, #bt-email').click(function(){
                $('#box').hide("drop", { direction: "up" }, 100, function(){
                    $('#overlay').fadeOut('fast');
                });
            });
            $(document).keyup(function(e) {
                if (e.keyCode == 27){
                    $('#box').hide("drop", { direction: "up" }, 100, function(){
                        $('#overlay').fadeOut('fast');
                    });
                }
            });
         }
    });
</script>
<% end %>

作为marteljn的评论，一定要在头部引用JQuery 

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

如果仍然无法正常工作，则可以按照jfriend00的建议发布Generetad HTML。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 升级的jQuery，.on（）和document.ready不能与UpdatePanels一起使用 jQuery document.ready 关于document.ready的jQuery说明 document.ready jQuery难度 JQuery document.ready() 开销 jQuery document.ready不前置 jQuery Document.ready循环 jQuery document.ready 不工作 jQuery document.ready没有响应 document.ready() 函数不起作用
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM