此段代码是对某块元素的移位:上移、下移。对比修改前后的两段代码:

修改前:

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

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

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

jquery的clone()引发的问题,下拉框点击没有反应的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 表单 - 创建树形下拉框

    jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...

  2. 第二百二十七节,jQuery EasyUI,ComboTree(树型下拉框)组件

    jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个 ...

  3. 第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件

    jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...

  4. JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)

    JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...

  5. jQuery EasyUI/TopJUI创建树形表格下拉框

    jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...

  6. 【jquery】ajax 动态 改变 select下拉框选中的值

    //JS<script type="text/javascript> //ajax动态给添加原料的[商品名称]下拉框绑定selected属性 $("#origin_co ...

  7. Bootstrap 下拉框点击没反应

    应该是第一次点击下拉框没反应,我把HTML复制出来单独运行,都是好的,就是在项目里面无法运行 哪里的js出问题了?找不到原因,控制台里的js也不报错 解决方法: $(function () { $(' ...

  8. jQuery多级联动美化版Select下拉框

    在线演示 本地下载

  9. ionic中select下拉框点击无反应解决办法

    两种解决办法: 1.在select外的div加入属性 data-tap-disabled=”true” 2.找到ionic.bundle.js文件 的下面这个函数,添加如图两行代码  

随机推荐

  1. 在ubuntu下安装zookeeper

    安装java环境,并配置好java相关的环境变量$JAVA_HOME. 1.下载并解压最新稳定的zookeeper文件 wget http://mirrors.cnnic.cn/apache/zook ...

  2. Spark RDD概念学习系列之如何创建RDD

    不多说,直接上干货! 创建RDD 方式一:从集合创建RDD (1)makeRDD (2)Parallelize 注意:makeRDD可以指定每个分区perferredLocations参数,而para ...

  3. redux原理

    Redux实现原理 不同组件需要依赖同一个数据的时候,就需要状态提升至这些组件的根组件. redux是状态统一管理工具,需要使用它的原因是: 组件之间通信统一管理,方便代码维护. React中有一个特 ...

  4. 微信小程序-最新获取用户基本信息方案

    如果只是单纯的展示用户信息,那么最简单的方案就是 文档中组件: <open-data type="groupName" open-gid="xxxxxx" ...

  5. 简述RNN Recurrent Neural Networks

    本文结构: 什么是 Recurrent Neural Networks ? Recurrent Neural Networks 的优点和应用? 训练 Recurrent Neural Networks ...

  6. javascript中DOM基础知识介绍

    1.1.     基本概念 1.1.1.      DOM DOM Document Object Model 文档对象模型 就是把HTML文档模型化,当作对象来处理 DOM提供的一系列属性和方法可以 ...

  7. C#中方向键与回车键切换控件焦点

    环境:界面上有TextBox,ComboBox等控件. 不建议把左右方向键都用来切换焦点,否则你在TextBox里面改变光标所在字符位置就不方便了. 方法一:笨方法,需为每个控件单独注册事件处理 以T ...

  8. 关于Android Studio更新后一直Refreshing的解决办法!

    今天更新了一下studio一直是这个问题 查了很多资料终于解决了 造成这个问题的原因是要更新的gradle版本和studio安装路径中的gradle版本不一致导致的 把他们改成一致的即可 在这个目录里 ...

  9. ZBrush常用快捷键

    ZBrush是一款数字雕刻和绘画软件,它以强大的功能和直观的工作流程彻底改变了整个三维雕刻行业.强大的功能离不开便捷的操作,为此ZBrush®提供了一系列常用操作快捷键,熟练掌握这些快捷键,可帮助您节 ...

  10. sklearn学习7-----决策树(tree)

    1.使用示例 2.树模型参数:[很多参数都是用来限制树过于庞大,即担心其过拟合] #  1.criterion  gini  or  entropy:用什么作为衡量标准 ( 熵值或者Gini系数 ). ...