jquery的clone()引发的问题,下拉框点击没有反应
此段代码是对某块元素的移位:上移、下移。对比修改前后的两段代码:
修改前:
//点击移位 function move(obj,posi){ var al=$(obj).parent('li').parent('.favoreeEditList').siblings('.favoreeEditList').length+1; var curObj = $(obj).parent('li').parent('.favoreeEditList'); var newObj=curObj.clone(curObj); var nextObj=curObj.next('.favoreeEditList'); var preObj=curObj.prev('.favoreeEditList'); var upHtml = '<a class="btnDel2 upMove" onclick="move(this,\'up\')">上移</a>'; var downHtml = '<a class="btnDel2 downMove" onclick="move(this,\'down\')">下移</a>'; if(posi=='down'){ if(curObj.index()==0){ newObj.children('li').first().find('.downMove').before(upHtml); nextObj.children('li').first().find('.upMove').remove(); } if(curObj.index()==al-2){ newObj.children('li').first().find('.downMove').remove(); nextObj.children('li').first().find('.upMove').after(downHtml); } nextObj.after(newObj); curObj.remove(); } else if(posi=='up'){ if(curObj.index()==al-1){ newObj.children('li').first().find('.upMove').after(downHtml); preObj.children('li').first().find('.downMove').remove(); } if(curObj.index()==1){ newObj.children('li').first().find('.upMove').remove(); preObj.children('li').first().find('.downMove').before(upHtml); } preObj.before(newObj); curObj.remove(); } }
修改后:
//点击移位 function move(obj,posi){ var al=$(obj).parent('li').parent('.favoreeEditList').siblings('.favoreeEditList').length+1; var curObj = $(obj).parent('li').parent('.favoreeEditList'); //此处对应的是同一个引用 var newObj=curObj; var nextObj=curObj.next('.favoreeEditList'); var preObj=curObj.prev('.favoreeEditList'); var upHtml = '<a class="btnDel2 upMove" onclick="move(this,\'up\')">上移</a>'; var downHtml = '<a class="btnDel2 downMove" onclick="move(this,\'down\')">下移</a>'; if(posi=='down'){ if(curObj.index()==0){ newObj.children('li').first().find('.downMove').before(upHtml); nextObj.children('li').first().find('.upMove').remove(); } if(curObj.index()==al-2){ newObj.children('li').first().find('.downMove').remove(); nextObj.children('li').first().find('.upMove').after(downHtml); } nextObj.after(newObj); } else if(posi=='up'){ if(curObj.index()==al-1){ newObj.children('li').first().find('.upMove').after(downHtml); preObj.children('li').first().find('.downMove').remove(); } if(curObj.index()==1){ newObj.children('li').first().find('.upMove').remove(); preObj.children('li').first().find('.downMove').before(upHtml); } preObj.before(newObj); } // 更新上移、下移 addMove(); }
标红的是修改的内容:
1.var newObj=curObj.clone(curObj);修改为var newObj=curObj;
2.curObj.remove();删除
思路:
原来的思路:
是将要移动的元素先clone给另一个对象,然后再将原来的元素删除,复制的对象进行前、或者后追加。
后来的思路:
原来的思路复制对象多此一举,并且导致clone的对象追加后,模块中的下拉框点击没反应。
当前对象并不用复制并删除,而是直接追加,因为操作的是这个元素引用,当点击当前元素下移,直接追加在下一个元素的后面,那么此模块从原来的的位置删除直接追加在前、后面
(因为操作的是同一个对象。举例说明:相当于两个杯子交换了一下位置,并不是将要移位的杯子复制出来一个,将原来的删除,再将复制的追加)。