在做web前端开发的时候,经常遇到一些数据多少或则类型不能在运行之前就确定下来的情况,此时,数据的展示,就要借助于动态创建html元素来展示了。
常见的动态创建HTML元素的方式,有如下几种,大体都差不多!
html 函数:
var eleHtml = "<div id='newone'> xxx </div>'";
jQuery(your_specified_selector).html(eleHtml)
append 函数:
var eleHtml = "<div id='newone'>xxx</div>";
jQuery(your_specified_selector).append(eleHtml);
appendTo函数:
var eleHtml = "<div id='newone'>xxx</div>";
jQuery.(eleHtml).appendTo(your_specified_selector);
但是,动态生存的html元素,没有办法通过常规的click函数给jquery给其绑定函数响应,需要通过下面的方式实现(下面是一个例子,我的项目中的片段代码):
$("#userinfopanel").click(function(e){
if($(e.target).is("#clear")){
//your logic
}else{
//your logic
}
}
另外, jquery validate 也没有办法对动态生成的html表单元素进行合法性校验。需要自己实现。