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的对象追加后,模块中的下拉框点击没反应。
当前对象并不用复制并删除,而是直接追加,因为操作的是这个元素引用,当点击当前元素下移,直接追加在下一个元素的后面,那么此模块从原来的的位置删除直接追加在前、后面
(因为操作的是同一个对象。举例说明:相当于两个杯子交换了一下位置,并不是将要移位的杯子复制出来一个,将原来的删除,再将复制的追加)。
jquery的clone()引发的问题,下拉框点击没有反应的更多相关文章
- 雷林鹏分享:jQuery EasyUI 表单 - 创建树形下拉框
jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
- 第二百二十七节,jQuery EasyUI,ComboTree(树型下拉框)组件
jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个 ...
- 第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件
jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...
- JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)
JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...
- jQuery EasyUI/TopJUI创建树形表格下拉框
jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...
- 【jquery】ajax 动态 改变 select下拉框选中的值
//JS<script type="text/javascript> //ajax动态给添加原料的[商品名称]下拉框绑定selected属性 $("#origin_co ...
- Bootstrap 下拉框点击没反应
应该是第一次点击下拉框没反应,我把HTML复制出来单独运行,都是好的,就是在项目里面无法运行 哪里的js出问题了?找不到原因,控制台里的js也不报错 解决方法: $(function () { $(' ...
- jQuery多级联动美化版Select下拉框
在线演示 本地下载
- ionic中select下拉框点击无反应解决办法
两种解决办法: 1.在select外的div加入属性 data-tap-disabled=”true” 2.找到ionic.bundle.js文件 的下面这个函数,添加如图两行代码
随机推荐
- EOJ 3018 查找单词
有一个单词 W,输出它在字符串 S 中从左到右第一次出现的位置 IDX(设 S 中的第 1 个字符的位置为 1).W 只由英文字母组成,S 除英文字母和汉字之外在任何位置(包括头和尾)另有一个或多个连 ...
- (转载)Android项目实战(二十八):Zxing二维码实现及优化
Android项目实战(二十八):Zxing二维码实现及优化 前言: 多年之前接触过zxing实现二维码,没想到今日项目中再此使用竟然使用的还是zxing,百度之,竟是如此牛的玩意. 当然,项目中 ...
- Navicat for Mysql 关于1130错误,无法正常方法解决的解决办法。
本人因为失误操作,不小心将mysql 玩崩了.导致一直报1130错误,无法进入. 看了很多网上的帖子,但是那些办法都行不通.最后通过好友的指点,解决了这个问题. 1.停止MySQL服务,执行net ...
- Linux apache tomcat
[root@node1 ~]# mv jdk-7u79-linux-x64.tar.gz /usr/local/[root@node1 ~]# cd /usr/local/[root@node1 lo ...
- C#基础篇之语言和框架介绍
1.如何描述C#和.NET的关系? .Net的是平台,C#是为了微软公司为了.NET平台开发的面向对象语言. 2.C#能做什么? (1)C#.NET做窗体应用开发,Web开发中可以通过WCF编写Web ...
- Django框架详解之url
Django基本命令 下载Django pip3 install django 创建一个django project django-admin.py startproject cms 当前目录下会生成 ...
- Java 实现简单的RPC框架
0 引言 RPC,全称为Remote Procedure Call,即远程过程调用,它是一个计算机通信协议.它允许像调用本地服务一样调用远程服务.它可以有不同的实现方式.如RMI(远程方法调用).He ...
- 在使用easyui datagrid在tab中遇到的问题
当切换tab时,数据加载了,但是table的宽和高不能不能够初始化. 郁闷了好久解决了这个问题: 在页面加载时和切换tab时,获取当前tab的名字,进行内容的初始化 $('a[name="m ...
- python的父类和子类中关于继承的不同版本的写法
Python 2.7中的继承 在Python 2.7中,继承语法稍有不同,ElectricCar 类的定义类似于下面这样: class Car(object): def __init__(self, ...
- Tomcat样例安全漏洞
[漏洞描述] Tomcat在使用的时候一般都直接官网下载源代码包直接使用. 默认情况下,Tomcat源码包里面包含了 examples 这个目录,这个目录主要实现一些样例页面的访问. 比如: ...