在HTML页面中使用jQuery显示JSON数据 [英] Display json data using jquery in html page
本文介绍了在HTML页面中使用jQuery显示JSON数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<html>
<head>
<style>
.messboxcontent { display:none; background: rgba(0,0,0,.4); width: 400px; height: 100px; margin: 50px auto; padding: 15px;}
.mess_test {display: inline-block; cursor: pointer ; vertical-align: middle; width:165px; height:35px; background:blue; bottom:0px; left:144px; margin-right: 16px}
#msg_holder {overflow-x:scroll ;overflow-y: hidden; white-space: nowrap; position:fixed;height:110px; width:100%; background-color:yellow; bottom:0px;}
</style>
<script type="text/javascript" src="jquery.js" ></script>
<script>
$(document).ready( function() {
done();
});
function done() {
setTimeout( function() {
update();
done();
}, 20000);
}
function update() {
$.getJSON("fetch.php", function(data) {
$.each(data.result, function(){
var message = this['message'];
var name = this['name'];
call(name, message);
});
});
};
function call(name, message){
$("#msg_holder").append("<div class='mess_test'>" + name + "<div>");
$(".mess_test").click( function() {
$('div.messboxcontent').html(' name : '+ name + ' Message : ' + message);
$('div.messboxcontent').fadeIn();
return false;
});
}
</script>
</head>
<body>
<div class="messboxcontent"></div>
<div id="msg_holder"></div>
</doby>
</html>
这是fetch.php文件
and this is the fetch.php file
{"result":[{"message":"this is jaja","name":"jaja"},{"message":"this is koka","name":"koka"}]}
当我单击包含任何名称的蓝色框时，它总是淡入最新的消息和名称.我想要的是当我单击包含jaja的框作为名称时我想要包含消息的框:这是jaja，
when ever i click on a blue box that Contain any name, it always fade in the latest message and name. what i want is when i click on the box that contain jaja as a name i want the box that contain message: this is jaja,
推荐答案
使用委托将事件添加到动态代码中，
use delegates for adding events to dynamic tags,
$("#msg_holder").append("<div class='mess_test' message='"+message+"'>" + name + "<div>");
$(document).on("click",".mess_test", function() {
$('div.messboxcontent').html(' name : '+ $(this).html() + ' Message : ' + $(this).attr("message"));
$('div.messboxcontent').fadeIn();
return false;
});
这篇关于在HTML页面中使用jQuery显示JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
