大致说一下场景,就是一个表单,表单内有添加按钮,点击添加按钮,增加一行输入内容。
先来说正确的打开方式
JS代码(文件名为form.js)
$(function () {
var model = $('#model').html(); //保存渲染前的模板
$('#model').css("display","none"); //隐藏模板
//增加按钮
$('.add').on('click','a',function () {
var $one = $("<div class='list'></div>").append(model);
$('.add').before($one);
$.parser.parse($one); //重新渲染$one对象
});
//模拟增加,用于出现第一行
$('.add a').click();
})
//删除按钮
function remove(event) {
var form = document.getElementsByTagName('form')[0];
form.removeChild(event.parentNode);
}
HTML代码
<form>
<div id="model" class="list">
<input class="easyui-combobox" data-options="prompt:'文本'" style="width:10%">
<input class="easyui-datebox" data-options="prompt:'时间',formatter:myformatter,parser:myparser" style="width:10%">
<a href="javascript:void(0);" onclick="remove(this)" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
</div>
<div class="add">
<a class="easyui-linkbutton" data-options="iconCls:'icon-add'"></a>
</div>
</form>
HTML中JS引用
<script type="text/javascript" src="../../resources/jquery-easyui-1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="../staticmedia/js/form.js"></script>
<script type="text/javascript" src="../../resources/jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../staticmedia/js/datebox.js"></script>
需要注意:
引用script时一定要注意顺序!!! jquery肯定在前边,自己写的JS会用到,而easyui的要在自己写的JS后边,如果在自己写的JS前面就会造成获取模板是取到的是渲染后的代码,这种情况下再次渲染会出现双份渲染,就是这个样子
这种情况下如果自己的JS中不再次渲染,倒是会显示正常,但是下拉三角之类的功能都无法使用
顺序的问题可能还会造成对别的JS有影响,因为可能会用到easyui中的方法,这种情况下只好提取JS到不同文件,分开放置了。
另说一些碰到的其他问题:
1、复制首先想到的就是直接上clone(),但是clone()方法无法保存渲染前的对象,渲染后的对象则又成为上边的问题。
2、before(), after(), insertBefor(), insertAfter() 这些方法返回值都是调用方本身,挺常识的,但是这些放到一起时就给混了,搞错了添加渲染对象时就没反应了。
3、$.parser.parse();不添加对象时全局重新渲染,这样会造成前面的数据丢失。
最后附一张完成图好了