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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值