关于jquery中动态添加节点后,直接操作节点会没有反应的问题

    前几天遇到一个问题,当我点击添加规章制度的时候,再增加规章制度的几个节点,同时每个规章制度都是可以增加也可以删除的,增加是很好解决的,当点击增加按钮的时候,通过创建节点的方法,直接创建就解决了,但是在删除的时候就出现问题了,当我找到删除按钮点击删除是没有反映的,后来通过查阅资料得到,在jquery动态添加的节点的操作,要通过事件委托的方法才能获得所操作的节点,所以要操作动态添加的数据必须通过数据委托的方式实现,啥也不说了,上代码与截图。

可以点击增加可以删除,直接点击删除是不可行的,只有通过实践委托的方式,js代码为一下:

//当点击增加新规章制度的时候
var count =0;
$('.rule_add').click(function(){
count++
var rule_list = $('<div class="parcel"><div class="publicity"><div class="publicity_center"></div><div class="publicity_left"><span class="publicity_top"></span><input type="file" class="publicity_top" name="upload_pdf['+count+']["aa"]"></div><div class="publicity_right"></div></div><input type="text" class="publicity_one" name="upload_pdf['+count+']["bb"]" placeholder="请输入规章制度名(务必与文件内容保持一致)"><input type="text" class="publicity_two" name="upload_pdf['+count+']["cc"]" placeholder="共_____项"><input type="text" class="publicity_three" name="upload_pdf['+count+']["dd"]" placeholder="制定时间时间:_____年_____月_____日"></div>');
rule_list.insertBefore($('.rule_add'));
});
//当点击删除公示规章制度的时候
$('.rule_publicity').on('click', '.publicity_right',function() {
//这里是保证最后一个是不能删除的,
if($('.parcel').size()>1){
$(this).parent().parent().remove();
}

});

     在时间委托的过程中,做好找到已经存在的直接父节点,这样可以快速的定位,减少资源的浪费。

posted @ 2017-04-20 11:13  单于521  阅读(1852)  评论(0编辑  收藏  举报