2013-11-29 3 views
0

Я загружаю внешний контент в свой документ в соответствии с кодом здесь. Тем не менее, у меня возникли проблемы с управлением css объекта внутри загруженного содержимого. На примере здесь #subContainer заканчивается синим, а не красным. Я думал, что это будет что-то отношение к времени между загрузкой и исполнением коды, поэтому я использую JQ .on(), но до сих пор нет результата ...Манипулирование объектами в загруженном содержимом

<!DOCTYPE html> 

<html lang="en"> 
<head> 

    <style> 
    #subContainer { 
     width:600px; 
     height:400px; 
     background:blue; 
    } 
    </style> 

    <script src="support/jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script> 
    <script> 

    $(document).ready(function() { 

     var $cntnr = $('#container'); 
     var $subCntnr = $('#subContainer'); 

     $(window).on('load', function() { 

      var testFunct = function() { 
       console.log($subCntnr) 
       $subCntnr.css({ background: 'red' }); 
      } 

      testFunct(); 

     }); 

     $cntnr.load('parentDoc.html', function() { 
      $('#subContainer').load('contents.html'); 
     }); 

    }); 

    </script> 

</head> 
<body> 

    <div id="container"></div> 

</body> 
</html> 

ответ

0

Когда документ загружен нет subContainer элемента так ваша переменная $subCntnr относится к пустому набору.

$(document).ready(function() { 
    var $cntnr = $('#container'); 

    $cntnr.load('parentDoc.html', function() { 
     $('#subContainer').load('contents.html'); 

     var $subCntnr = $('#subContainer'); 
     console.log($subCntnr) 
     $subCntnr.css({ 
      background: 'red' 
     }); 
    }); 
}); 

Также AFAIK нет load события не срабатывает при использовании load() для загрузки содержимого в элемент. Поэтому вам нужно добавить свой код манипуляции с домом для полного обратного вызова загрузки.

Update:

$(document).ready(function() { 
    var $cntnr = $('#container'); 

    function dosomething() { 
     var $subCntnr = $('#subContainer'); 
     console.log($subCntnr) 
     $subCntnr.css({ 
      background: 'red' 
     }); 
    } 

    $cntnr.load('parentDoc.html', function() { 
     $('#subContainer').load('contents.html'); 
     dosomething() 
    }); 
}); 
+0

бы эта работа, если внутри нагрузку обратного вызова, я бы только вызов функции и весь код, который на самом деле должен быть выполнен на обратном вызов -inside этой вызываемой функции (которая будет сидеть вне ручки загрузки/обратного вызова)? Имеет ли значение, если эта вызываемая функция указана в коде до или после '$ cntnr.load'? – user3024007

+0

не он не ... только думаю, что дело в том, что функция должна быть вызвана в пределах нагрузки callbacl –

+0

@ user3024007 вы имели в виду как обновление –

Смежные вопросы