Question

我已经在这方面工作了几天，而且一直无法找到解决方案。基本上，我必须在头脑中使用不会执行$(document).ready(...)的JS脚本。奇怪的是，我有其他脚本可以正常使用它。以下是我遇到的两个问题:(我添加了一些关于我尝试过的评论）

<% 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标签，因为它是我能辨别的唯一区别。（JS在Firebug中显示）我的onload标签中也没有<body>。另一个奇怪的是它曾经工作，我不记得对这些脚本中的任何一个进行任何更改。

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

Answer 1

也许您应该尝试将所有JS代码放在相同的标记脚本和$（文档）.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。

jQuery document.ready无法正常工作

1 个答案: