0

私はこれに数日間取り組んできましたが、解決策を見つけることができませんでした。基本的に、私は頭の中でJSスクリプトを実行しなければなりません$(document).ready(...). 奇妙なことは、それで問題なく動作する他のスクリプトがあることです。ここに私が問題を抱えている2つがあります:(私が試したことについていくつかのコメントを追加しました)

<% 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 IS は Firebug に表示されます)タグonloadにもがありません。<body>もう 1 つの奇妙な点は、以前は機能していたのに、これらのスクリプトのいずれかに変更を加えた覚えがないことです。

console.log($)編集2:もう1つ:直前に置くこともでき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>

4

1 に答える 1

0

すべての 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 のコメントとして、head セクションで必ず JQuery を参照してください。

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

それでもうまくいかない場合は、jfriend00 の提案に従って、generetad HTML を投稿できます。

于 2012-09-13T00:47:11.633 に答える