加載html後jQuery獲取id

我有問題。我有兩個.html文件。加載html後jQuery獲取id

<!DOCTYPE html> 
<html><head>...</head> 
<body> 
    <ul><li id="home"><a>Home</a></li></ul> 
    <div class="content"></div> 
    <script type="text/javascript" src="Javascripts/navigation.js"></script> 
</body> 
</html>

和

<h1>Welcome!</h1> 
<div id="imgPanel" style="background:red;"> 
    <img src="Images/me.png" class="img-responsive img-rounded"> 
</div> 
<div id="textPanel" style="background:blue;"></div>

在我navigation.js我第二.html文件加載到第一的.html的「內容」 -div：

$(document).ready(function() { 
    var content = $(".content"); 
    var a = $("#home"); 

    home(); 
    $('#textPanel').height($('#imgPanel').height()); 

    function home() { 
     content.load("home.html"); 
    } 

    a.on("click", function() { 
     home(); 
    }); 
});

裝載作品！我的問題是現在：
我怎樣才能得到第二個.html的div的ID我加載到第一個？
var = $("#textPanel");是null。

來源

2015-11-21 Anton Styopin

是它不出現，我卻用它的高度（） - 方法，你可以看到。如果我提醒（$（「＃textPanel」）。height（））;它返回null。 –

由於內容被異步加載，你可能想改變你這樣的代碼，執行$('#textPanel').height()可用時：

function home(){ 
    content.load("home.html", function(){ 
     $('#textPanel').height($('#imgPanel').height()); 
    }); 
}

從this規範回調

的

編輯

替代品：

lo交鋒內容

<h1>Welcome!</h1> 
<div id="imgPanel" style="background:red;"> 
    <img src="Images/me.png" class="img-responsive img-rounded" onload="setHeight()"> 
</div> 
<div id="textPanel" style="background:blue;"></div>

的JavaScript

$(document).ready(function() { 
    var content = $(".content"); 
    var a = $("#home"); 

    home(); 

    function home() { 
     content.load("home.html"); 
    } 

    a.on("click", function() { 
     home(); 
    }); 
}); 

function setHeight(){ 
    $('#textPanel').height($('#imgPanel').height()); 
}

來源

2015-11-21 15:04:39 Arg0n

感謝它的運作！但爲什麼它不改變第一次加載時的高度？只有在第二次加載後他才改變高度？ –

如果您添加關於您的代碼如何解決OP問題的解釋，例如添加關於jQuery加載函數的異步方面的簡要說明，並且它接受函數回調，將對未來查看此問題的其他人有所幫助當它完成時。 –

你有這樣的想法？ – Arg0n

加載html後jQuery獲取id

回答

相關問題