JQuery 动态添加DOM元素及事件响应机制的2点注意

需求:

1. 每点击一次 button “+” 在 #task1中增加一个 div 条目包含 {一个 input-text 和 一个button "-"}  

2. 点击button '-', 删除button"-" 所在的div条目

    <div class="task" id="task1">
    	<input type="button" name="add" value="+"/>
    </div>

====================================================================================

代码片段1:

$().ready(function(){
	var $addItem=$("<div><input type='text' level='0'/><input type='button' name='remove' value='-'/></div>");
	$("input[name=remove]").click(function(){ // ---> 错误源2 ---> 修改见代码片段3
		$(this).parent().remove();
		});
	$("#task1>input[name=add]").click(function(){
		$("#task1").append($addItem); // ---> 错误源1 ---> 修改见代码片段2
	});
});

代码1错误现象:

1. 每次点击button "+" 只出现一个新建div条目

2. 点击button "-" 无法删除本行div 

错误原因: 

$addItem是一个非匿名的object,有独立的引用地址, append($addItem)只添加一次, 再次添加时发现已经添加就不在添加

----------------------------------------------------------------------------------------------------------------------------------------------------------

代码片段2:

如下修改

$("#task1").append($addItem.clone(true));

仍有错误

2. 点击button "-" 无法删除本行div

错误原因: 

添加$addItem.clone(true)元素发生在function{ } 子域中, 而这个子域中创建的元素没有得到 点击时绑定click事件的响应方法, 所以, 要将这个click事件处理机制绑定在$addItem上, clone方法已经添加参数true, 即clone事件处理机制. 见代码片段3.

----------------------------------------------------------------------------------------------------------------------------------------------------------

代码片段3:

$addItem.children("input[name=remove]").click(function(){
		$(this).parent().remove();
});

====================================================================================

完整的可行代码:

$().ready(function(){
	var $addItem=$("<div><input type='text' level='0'/><input type='button' name='remove' value='-'/></div>");
	$addItem.children("input[name=remove]").click(function(){
		$(this).parent().remove();
		});
	$("#task1>input[name=add]").click(function(){
		$("#task1").append($addItem.clone(true));
	});
});

总结:

1. 对非匿名jQuery对象的append, 同一个对象只能添加一次, 多次应用需要clone

2. function{}子域中添加jQuery形式的DOM对象, 需要在子域内添加事件响应机制, 子域外的事件响应机制无法添加进来, 除非添加元素本身已经携带了此事件响应机制