Question

在我的代码中，我有外部脚本，它为我的页面添加了一些元素。此脚本在document.ready：

之后加载异步

<script src="http://any.com/script.js"></script>

此脚本包含下一个：

$.ajax({
       url: '/anyScript',
       complete: function(){
          alert('yo'); // FIRED
          $('body').append('<div id="xxx" />'); // FIRED
       }
   });

我需要等到这个元素出现并添加一些样式

$(function(){

    $('body').on('load','#xxx', function(){
        $(this).css({
            background:'red',
            width: 100,
            height: $('#first_el').height()
        });
    });
});

这不会发生。怎么办？

更新：http://jsfiddle.net/81ucdoLo/1/

Answer 1

您可以尝试使用ajaxComplete，如下所示：

$( document ).ajaxComplete(function() {
  $('#xxx').css({
    background:'red',
    width: 100,
    height: $('#first_el').height()
 });
});

Working Demo

Answer 2

此解决方案基于您无法控制外部脚本的假设。所以建议的解决方案是使用基于区间的解决方案来检查目标元素是否被加载，如果这样，然后停止间隔。

在这种情况下，请尝试使用$ .getScript（）加载脚本，如

jQuery.getScript('http://any.com/script.js', function () {
    var interval = setInterval(function () {
        var $el = $('#xxx');
        if ($el.length) {
            clearInterval(interval);
            $el.css({
                background: 'red',
                width: 100,
                height: $('#first_el').height()
            });
        }
    }, 500);
})

演示：Fiddle

Answer 3

这应该等待元素准备好了：

$(function(){
  $("#xxx").css('top','123px');
  //OR
  $("#xxx").addClass('topMargin');
});

Answer 4

做这样的事情，使用window.onload调用你的js函数，它会在你的页面加载后执行doSomthing函数。

window.onload = function() {doSomthing();}

function doSomthing()
{
   $("#xxx").css('top','123px');

}

或者添加超时，

setTimeout(doSomthing,1000);

这会延迟通话过程，并会在指定时间后调用。

如果您尝试这样做怎么办： JSFiddle Demo:

我更新了你的演示。

Jquery On从外部脚本加载元素

4 个答案: