场景 调用后台返回的json数据解析之后,在前台动态渲染
主要用的jQuery的
$("p").append("<b>Hello</b>");
方法里面可以添加你要显示的标签和解析的数据
$(".contet-box4").append(
"<div class='content content-self-1'><h4 class='left'>" +
//这是变量,解析过来的数据
item.policyName +
"</h4 >" +
"<img class='right' id='increase-heigh' src='images/zhankai.png' alt=''>" +
'<div class="clearfix"></div>' +
'<div class="info-box">' +
'<div class="left" style="width: 40%;">' +
'<img class="left" src="images/call.png" alt="">' +
注意几点
- 标签要用
'
括起来 - 变量的前后要加
+
号 - 一个标签的末尾要加
+
号
步骤
- 先写静态页面
- 大概调好样式
- 把你要动态渲染的标签和变量放在
append()
中 - 删除html中的标签
- 你要动态渲染的标签要放在一个
div
里好操作
给动态添加的标签添加事件如点击事件
个人习惯用
on方法大多数版本的jquery都是支持这个方法的
已测版本jquery 3.2.0
.input
是父级标签的类,.select
是你要添加的标签事件的类
$(' .input').on('click', '.select', function (event) {
console.log('用on绑定动态生成的元素')
});
多个标签绑定同一个事件
静态标签
$("#div1,.div2,.div3").click(function(){
// code...
});
动态生成的标签
$(document).on('click', "#div1,.div2,.div3", function () {
// code...
});