jQuery window.load不会修改使用其他JavaScript创建的dom元素

Question

我正在使用jQuery修改已使用其他JavaScript创建的html。 如果我单击按钮时使jQuery运行，则一切正常。

但是，如果我在窗口加载时运行jQuery，它不会执行任何操作。 通过添加警报，它似乎在其他JavaScript在页面上创建html之前运行。 其他所有JavaScript完成后，如何使jQuery运行？

注意-我只是制作一个演示，因此在这种情况下，性能和最佳实践并不是真正的问题。 谢谢

更新-这是我的代码：

<html>    
  <head> 
    <script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>        
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="../gmap3.js"></script> 
    <style>
        body, html {
            margin: 0;
            padding: 0;
        }
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 320px;
        height: 450px;
      }
      #panTo{
        background-color: Pink;
        float: left;
        text-align: left;
        width: 200px;
      }
      .find {
        height: 10px;
        width: 10px;
        background-color: grey;
      }
      #start {
        position: absolute;
        top: 0;
        right: 0;
      }
      #button-0 {
        display: none;
      }
      .two {
        background-color: white;
        display: none;
        white-space: nowrap;
        z-index: 999999;
        position: relative;
        right: -19px;
        top: -46px;
        padding: 5px;
        border: 1px solid black;
        border-radius: 10px;
      }
      .no {
        text-align: center;
        border:1px solid grey; 
        position: relative; 
        left: -22px; 
        top: -2px; 
        background-color: white; 
        width: 19px; 
        height: 32px;
      }
      .active {
        font-weight: bold;
      }
    </style>

    <script type="text/javascript">

      $(function(){
      var points = [
            [54.618017, 3.48291],
            [53.618017, 2.78291],
            [52.618017, 2.48291],
            [51.618017, 2.28291],
            [50.618017, 1.88291],
            [50.218017, 1.48291],
            [50.118017, 0.439453]
        ];



        $('#test1').gmap3(
          { action: 'init',
            center:{
                lat:44.797916, 
                lng:-93.278046
            },
            onces: {
              bounds_changed: function(){
                $(this).gmap3({
                  action:'getBounds', 
                  callback: function (bounds){
                    if (!bounds) return;
                    var southWest = bounds.getSouthWest(),
                        northEast = bounds.getNorthEast(),
                        lngSpan = northEast.lng() - southWest.lng(),
                        latSpan = northEast.lat() - southWest.lat(),
                        i;
                    for (i = 1; i < 4; i++) {
                     // add($(this), i, southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
                      add($(this), i, points[i][0], points[i][1]);
                    }
                  }
                });
              }
            }
          }
        );

      });

      function add($this, i, lat, lng){
        $this.gmap3(
        { action: 'addMarker',
          latLng: [lat, lng],
          callback: function(marker){
            var $button = $('<span id="button-'+i+'"> ['+i+'] </span>');
            $button
              .click(function(){    
                  $this.gmap3({
                    action:'panTo', 
                    args:[marker.position]
                  });
              })
              .css('cursor','pointer');
            $('#panTo').append($button);
          }
        },
        { action:'addOverlay',
          latLng: [lat, lng],
          options:{
            content: '<div class="no no-'+i+'" >'+i+'<div class="two"></div></div>',
            offset:{
              y:-32,
              x:12
            }


          },

          events:{
            mouseover: function(overlay){
           //   $(overlay.getDOMElement()).children().css('backgroundColor', '#0000FF');
            },
            mouseout: function(overlay){
           //   $(overlay.getDOMElement()).children().css('backgroundColor', '#00FF00');
            }
          }








        });
      }







      $(document).ready(function() {
      //$('#start').live("click", function() {
      //  $(window).load(function () {




                $('#button-1').html('<p>1) Herne Hill</p>');
                $('#button-2').html('<p>2) Sloane Square</p>');
                $('#button-3').html('<p>3) Elephant and Castle</p>'); 

                $('.no-1 .two').text('Herne Hill');
                $('.no-2 .two').text('Sloane Square');
                $('.no-3 .two').text('Elephant and Castle');



            $('#button-1').live("click", function() {
                $('.two').css('display','none');
                $('.no-1 .two').css('display','inline-block');
                $('#panTo span').removeClass('active');
                $(this).addClass('active');
            });

            $('#button-2').live("click", function() {
                $('.two').css('display','none');
                $('.no-2 .two').css('display','inline-block');
                $('#panTo span').removeClass('active');
                $(this).addClass('active');
            });

            $('#button-3').live("click", function() {
                $('.two').css('display','none');
                $('.no-3 .two').css('display','inline-block');
                $('#panTo span').removeClass('active');
                $(this).addClass('active');
            });



            $('.no-1').live("click", function() {
                $('.two').css('display','none');
                $('.no-1 .two').css('display','inline-block');
                $('#panTo span').removeClass('active');
                $('#button-1').addClass('active');
            });

            $('.no-2').live("click", function() {
                $('.two').css('display','none');
                $('.no-2 .two').css('display','inline-block');
                $('#panTo span').removeClass('active');
                $('#button-2').addClass('active');
            });

            $('.no-3').live("click", function() {
                $('.two').css('display','none');
                $('.no-3 .two').css('display','inline-block');
                $('#panTo span').removeClass('active');
                $('#button-3').addClass('active');
            });



        });


    </script>  

    <meta name="viewport" content="width=device-width">

  </head>

  <body>

    <div id="start">start</div>

    <div id="panTo"></div>
    <div id="test1" class="gmap3"></div>
  </body>
</html>

Answer 1

您也可以延迟脚本的执行，以确保其他库已完成其初始化。

例如：

$(function(){

   setTimeout(function(){
     //your code in this block is executed after 500 ms

   }, 500);

});

Answer 2

如果外部代码后，把你的代码中，外部代码完成后，将运行，因为准备处理程序使用队列。

没有理由使用setTimeout

$(function(){alert('external');});

//...
//... 
//...    
$(function(){alert('your code');});

看到这个演示

jQuery window.load不会修改使用其他JavaScript创建的dom元素

问题描述

2 个解决方案

解决方案1
1 已采纳 2012-03-06 10:15:25

解决方案2
0 2012-03-06 10:12:57

jQuery window.load不会修改使用其他JavaScript创建的dom元素

问题描述

2 个解决方案

解决方案1 1 已采纳 2012-03-06 10:15:25

解决方案2 0 2012-03-06 10:12:57

解决方案1
1 已采纳 2012-03-06 10:15:25

解决方案2
0 2012-03-06 10:12:57