页脚没有显示Jquery函数后

我使用此代码生成引导面板使用JSON，它的工作正常。但现在我需要在此面板后显示页脚。但是在这个函数之后页脚不会被加载。这个jQuery函数不仅仅是页脚，其他HTML内容也不会显示。为什么以及如何解决它？页脚没有显示Jquery函数后

var valMS = [ 
    { 
    "Subject": "Test", 
    "Message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", 
    "Date": "12-03-17" 
    }, 
    { 
    "Subject": "Test", 
    "Message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", 
    "Date": "12-03-17" 
    }, 
    { 
    "Subject": "Test", 
    "Message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", 
    "Date": "12-03-17" 
    }, 
    { 
    "Subject": "Test", 
    "Message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", 
    "Date": "12-03-17" 
    } 
]; 

$(document).ready(function() { 
    html = '<div class="container" >'; 
    // var flag = 0; 

    $.each(valMS, function(index, v){ 
     html += '<div id="events" class="container"><div class="row">'; 
     html += '<div class="panel panel-primary" style="width: 20%;" >'; 
     html += '<div class="panel-heading">'+v["Subject"]+'</div>'; 
     html += '<div class="panel-body">'+v["Message"]+'</div>'; 
     html += '<div class="panel-footer">'+v["Date"]+'</div>'; 
     html += '</div>'; 
     html += '</div></div>'; 
    }); 

    $('body').append(html); 
    //$(".container").after($("<p>Test</p>")); 
}); 

</script>

来源

2017-04-10 Rooter

什么页脚？你所显示的是javascript。我们不知道页面中有什么或者用什么css。请参阅[mcve] – charlietfl

您的'js'中出现了某些错误。请检查您的浏览器控制台。 –

检查您的浏览器控制台。 –

您要关闭循环中的<div>！试试这个：

html = '<div class="container" >'; 
$.each(valMS, function(index, v){ 
    html += '<div id="events" class="container"><div class="row">'; 
    html += ' <div class="panel panel-primary" style="width: 20%;" >'; 
    html += ' <div class="panel-heading">'+v["Subject"]+'</div>'; 
    html += ' <div class="panel-body">'+v["Message"]+'</div>'; 
    html += ' <div class="panel-footer">'+v["Date"]+'</div>'; 
    html += ' </div>'; 
    html += '</div>'; 
}); 
html += '</div>'; 
$('body').append(html);

来源

2017-04-10 17:24:49 miken32

谢谢。你的回答对我有帮助。请检查我更新的问题。表生成函数的错误是什么。在那之后我也面临同样的问题。页脚不显示。 – Rooter

如果有任何答案是有帮助的，请将它们加注。如果这个人回答了你的问题，请将其标记为已接受。如果您有*另一个问题，请点击主页上的“问题问题”按钮。 – miken32

好吧，我完成了你说的:)这是我的新问题。我认为提问有一些限制。对不起http://stackoverflow.com/questions/43331403/page-content-not-showing-after-jquery功能 – Rooter

好的，这样吗？只是与编号

<!DOCTYPE html> 
<html> 

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 


    <title>test</title> 

    <!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 


<style> 

</style> 

</head> 

<body> 








<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 

<script> 

var valMS = [ 
    { 
    "Subject": "Test", 
    "Message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", 
    "Date": "12-03-17" 
    }, 
    { 
    "Subject": "Test", 
    "Message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", 
    "Date": "12-03-17" 
    }, 
    { 
    "Subject": "Test", 
    "Message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", 
    "Date": "12-03-17" 
    }, 
    { 
    "Subject": "Test", 
    "Message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", 
    "Date": "12-03-17" 
    } 
]; 

$(document).ready(function() { 
    html = '<div class="container" id="mypanel">'; 
    // var flag = 0; 

    $.each(valMS, function(index, v){ 
     html += '<div id="events" class="container"><div class="row">'; 
     html += '<div class="panel panel-primary" style="width: 20%;" >'; 
     html += '<div class="panel-heading">'+v["Subject"]+'</div>'; 
     html += '<div class="panel-body">'+v["Message"]+'</div>'; 
     html += '<div class="panel-footer">'+v["Date"]+'</div>'; 
     html += '</div>'; 
     html += '</div></div>'; 
    }); 

    $('body').append(html); 
    $("#mypanel").after($('<div class="footer"><div class="container"<p>This is a footer</p></div></div>')); 
}); 

</script> 



</body> 

</html>

来源

2017-04-10 18:54:45

页脚没有显示Jquery函数后

回答

相关问题