HTML 文字列を動的に作成する JavaScript 関数を作成しましたが、何らかの理由で、HTML が読み込まれるとページがスクロールしなくなります。Chrome 開発者コンソールを開くと、突然ページがスクロールできるようになります。チェックしたところ、必要な開始および終了 div タグがすべて揃っていると思います。誰もこれを見たことがありますか。
これは、ページが読み込まれる前に JavaScript が終了できないことに関係がありますか?
どんな助けでも大歓迎です!
HTML:
//Here is where I call the function to dynamically create the html
<div id="memberList">
<script>
$(document).ready(function() {
generateMembers();
});
</script>
</div>
ジャバスクリプト:
function generateMembers(){
var doneTask = false;
var TrebUser = Parse.Object.extend("TrebUser");
var queryTrebUser = new Parse.Query(TrebUser);
queryTrebUser.find({
success: function(results) {
//Create the member profiles
var t ="<div class=\"row-fluid\"><div class=\"span12\">";
for (i = 0; i < results.length; i++) {
//var member = results[i];
//alert("results length: " + results.length);
t += "<div class=\"span3\">\
<div class=\"met_team_member\">\
<div class=\"met_team_member_preview\">\
<img src=\"photos/teamMembers/1.jpg\" alt=\"\" />\
<div class=\"met_team_member_overlay\">\
<div class=\"met_team_member_skill\"><div style=\"width: 100%\"><span class=\"met_bgcolor_trans met_color2\">Photoshop</span></div></div>\
<div class=\"met_team_member_skill\"><div style=\"width: 100%\"><span class=\"met_bgcolor_trans met_color2\">Illistration</span></div></div>\
<div class=\"met_team_member_skill\"><div style=\"width: 100%\"><span class=\"met_bgcolor_trans met_color2\">Photography</span></div></div>\
<div class=\"met_team_member_skill\"><div style=\"width: 100%\"><span class=\"met_bgcolor_trans met_color2\">HTML</span></div></div>\
</div>\
</div>\
<div class=\"met_team_member_details met_bgcolor3 met_color2\">\
<h2 class=\"met_title_stack\">DESIGNER</h2>\
<h3 class=\"met_title_stack met_bold_one\">ERKAN DOE</h3>\
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore magna aliqua. </p>\
</div>\
<div class=\"met_team_member_socials met_bgcolor clearfix\">\
<a href=\"http://www.facebook.com/\" target=\"_blank\" class=\"met_color2\"><i class=\"icon-facebook\"></i></a>\
<a href=\"http://www.twitter.com/\" target=\"_blank\" class=\"met_color2\"><i class=\"icon-twitter\"></i></a>\
<a href=\"http://www.google.com/\" target=\"_blank\" class=\"met_color2\"><i class=\"icon-google-plus\"></i></a>\
<a href=\"mailto:info@metcreative.com\" target=\"_blank\" class=\"met_color2\"><i class=\"icon-envelope\"></i></a>\
</div>\
</div>\
</div>";
if ((i+1) % 4 == 0){
t += "</div></div><div class=\"row-fluid\"><div class=\"span12\">";
}
}
t += "</div></div>";
document.getElementById('memberList').innerHTML = t;
},
error: function(results, error) {
alert("Error: " + error.code + " " + error.message);
}
});
}