堆棧內存溢出
  簡體   English   中英

jQuery document.ready無法正常工作

[英]jQuery document.ready not working

 原文  2012-09-13 00:26:20  5   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