Semine_1126的博客通过本文主要向大家介绍了js动态添加标签,js动态添加html标签,js动态控制td标签,js动态创建script标签,js动态创建标签等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
1、动态添加的标签无法绑定js事件函数?
采用寄托绑定：
$("body").on("click",".change",function(){ })
相当于页面渲染（包括js）完成后这个会自动去到另一个容器，标签动态添加之后依然会调用此事件。
2、动态添加的标签无法调用函数？？
如$(‘.draggable-element’).arrangeable( );
如果此函数已经封装好事件（如拖拽），没办法用上面问题1的方法，
所以只能用计时器setTimeout，每次动态添加之后执行调用
setTimeout(function(){
//新添加的标签再次渲染拖拽事件
$('.draggable-element').arrangeable();
},50);
在此不建议用setInterval定时器，多次后会出现拖拽不流畅
下面是案例：
<script>
jQuery(function(){
$('.icon-add').click(function(){
var emptyElement = '<div class="node draggable-element"><button type="button" class="btn btn-left "> </button><input type="text" class="empty txt" placeholder="编辑内容" "><button type="button" class="btn btn-default" onclick="$(this).parent().remove();">X</button></div>';
$('.newsmodel .content').append(emptyElement);
setTimeout(function(){
//新添加的标签再次渲染拖拽事件
$('.draggable-element').arrangeable();
},50);
setTimeout(function(){
//新添加的标签再次能自适应文字宽度
$(".empty").bind('keydown', function(){
$(this).width(textWidth($(this).val()));
});
},50);
});
$('.btn-value').click(function(){
var buttonValue = $(this).text();
var buttonElement ='<div class="node draggable-element d-1"><input type="button" class="btn btn-info txt" value="'+buttonValue+'" ><button type="button" class="btn btn-default" onclick="$(this).parent().remove();">X</button></div>';
$('.newsmodel .content').append(buttonElement);
setTimeout(function(){
//新添加的标签再次渲染拖拽事件
$('.draggable-element').arrangeable();
},50);
});
//拖拽事件调用
$('.draggable-element').arrangeable();
})