jQuery动态绑定事件(左右移动)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div, div button {
display: inline-block;
float: left;
}
#button {
margin: 10px 10px;
}
</style>
</head>
<body>
<div>
<select name="" id="eg1" multiple>
<option value="">nihao1</option>
<option value="">nihao2</option>
<option value="">nihao3</option>
<option value="">nihao4</option>
</select>
</div>
<div id="button">
<button id="select_all" type="button"> ></button>
<br>
<button id="cancel_all" type="button"> <</button>
</div>
<div>
<select id="eg2" multiple>
<option value="">hah1</option>
<option value="">hah2</option>
</select>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
// 选中全部
$('#select_all').click(function () {
$('#eg2').append($('#eg1>option'));
});
// 取消全部
$('#cancel_all').click(function () {
$('#eg1').append($('#eg2>option'));
});
// 双击选中
$('#eg1').on('dblclick', 'option', function () {
$('#eg2').append($(this));
});
// 双击取消
$('#eg2').on('dblclick', 'option', function () {
$('#eg1').append($(this));
});
</script>
</body>
</html>
jQuery动态绑定事件(左右移动)的更多相关文章
- jquery - 动态绑定事件
举个例子: html页面 <div><button type="button" class="test">测试</button&g ...
- jquery动态绑定事件
什么是动态绑定? 动态绑定是指动态添加的DOM节点或者html元素,他们最开始时运行的时候是不存在的.如果要给这些动态加入的节点增加事件,就必须要用jquery的on方法来绑定事件. $('.cont ...
- $("#XXX").click()和$("#YYY").on("click","指定的元素",function(){});的区别(jQuery动态绑定事件)
//绑定 下一页 的点击事件 $("a[aria-label='Next']").click(function(){ $("a[aria-label='Previous' ...
- Jquery中$("").事件()和$("").on("事件","指定的元素",function(){});的区别(jQuery动态绑定事件)
这个是在学习时不懂的问题,记录下来方便查看 转至https://www.cnblogs.com/mr-wuxiansheng/p/7136864.html //绑定 下一页 的点击事件 $(" ...
- jquery json遍历和动态绑定事件
<div id='tmpselectorList' style='border: 1px solid grey;max-height: 150px;position:absolute;text- ...
- jQuery的动态绑定事件的应用
注意:bind()的事件绑定是只对当前页面选中的元素有效.如果你想对动态创建的元素bind()事件,是没有办法达到效果的 <script src="jquery-1.11.2.min. ...
- [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- jquery 动态绑定bind()及模拟鼠标点击A链接
近来自觉前端有小小进步,幸而记之. 1.两个 css class 紧挨在一起 则在html元素中,要同时拥有这两个class,才能起作用 .block.db{ background-image:url ...
- jQuery的事件绑定与触发 - 学习笔记
jQuery的事件绑定与触发 事件绑定 自动触发事件 常用的鼠标事件 事件冒泡和默认行为 事件冒泡 默认行为 获得当前鼠标的位置和按键 jQuery的事件绑定与触发 事件绑定 基本绑定 $(eleme ...
随机推荐
- 139.00.004 Git学习-远程仓库之Github
参考Github官方HelloWorld入门教程 "有了远程仓库,妈妈再也不用担心我的硬盘了."--Git点读机 本章开始介绍Git的杀手级功能之一(注意是之一,也就是后面还有之二 ...
- #学习tips——写给自己的语录
用编程证明自己的观点! "我以为我懂了?"-- 花1/3的时间去学去记,剩下的时间应用做记忆实战. 记录一个转变 2018.6.7 (英文字幕-->无字幕!)good job ...
- 【Android】修改包名
工程写的差不多了才发现原来用的包名还是自己尝试性的进行写代码的时候用到的.但apk的发布,google map api的申请等等方面都需要用到一个比较规范的包名.这就涉及到修改包名的问题. 包名一开始 ...
- 【Python】卸载完Python3 之后 Python2 无法打开IDLE
安装官方的Python带Idle但是却无法打开,百度谷歌了几种解决方法,加上自己的实际境况予以解决. 我的python是直接安装在C盘下的. 1.首先是设置环境变量: Path=C:\Python27 ...
- 利用NVM在系统中维护多个版本的nodejs
0. 背景 开发时可能同时进行多个项目,而这些项目所依赖的node版本又不是一样的.比如我现在的angular项目采用的node是8.9.3版本,而vue项目的vue-cli则依赖更高.由于ang ...
- AWS的load balance
Route53实现了地理上的load balance; ELB实现了region内的load balance CloudFront实现了静态内容的全网加速 ZULh?*;&T(
- 立即终止Sleep的线程
在实际工作中,我们需要每隔几分钟从API取数. while(isRunning) { work(); Thread.Sleep(5*60*1000); } 如果设置isRunning=false,也需 ...
- l2tp over ipsec
搭建教程: 转自: https://segmentfault.com/a/1190000006125737 http://www.wangyuxiong.com/blog/ti-yan-qiang-w ...
- July 02nd 2017 Week 27th Sunday
No safe wading in an unknown water. 未知水深浅,涉水有危险. Is this the theory that has been the guideline for ...
- Python 冒泡排序法分析
冒泡排序法 def maopao(): array = [2,1,3,6,5,4] #确定一组需要排序的数值列表 for i in range(len(array)-1): #大循环次数=列表长度,但 ...