jQuery window.load没有't修改使用其他javascript创建的dom元素

jQuery window.load doesn't modify dom elements created with other javascript

本文关键字：javascript 其他 创建 元素 dom 修改 没有 load window jQuery      更新时间：2023-09-26

Im使用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>

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

例如：

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

如果将代码放在外部代码之后，它将在外部代码完成后运行，因为就绪处理程序使用队列。

没有理由使用setTimeout

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

请参阅此演示

相关文章：