需求:
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对象, 需要在子域内添加事件响应机制, 子域外的事件响应机制无法添加进来, 除非添加元素本身已经携带了此事件响应机制