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的对象追加后,模块中的下拉框点击没反应。

  当前对象并不用复制并删除,而是直接追加,因为操作的是这个元素引用,当点击当前元素下移,直接追加在下一个元素的后面,那么此模块从原来的的位置删除直接追加在前、后面

  (因为操作的是同一个对象。举例说明:相当于两个杯子交换了一下位置,并不是将要移位的杯子复制出来一个,将原来的删除,再将复制的追加)。

 

posted @ 2018-01-08 17:21  super超人  阅读(520)  评论(0编辑  收藏  举报