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 ...
随机推荐
- 30_AQS
[参考文章] https://www.jianshu.com/p/df0d7d6571de http://ifeve.com/introduce-abstractqueuedsynchronizer/ ...
- 【ArcGIS】最近遇到的几个已经被解决的问题
昨天刚出差回来,自己的第一个地图项目也就快接近尾声了,回到公司马上就打开了博客园记录一下最近遇到的几个地图相关的问题. 1.在ArcGIS server上点击 View In:ArcGIS J ...
- Android 自定义ScrollView(具有反弹效果的ScrollView,能够兼容横向的滑动)
package com.itau.jingdong.widgets; import android.content.Context; import android.graphics.Rect; imp ...
- 浅谈 @RequestParam 和@PathVariable
版权声明:本文为博主原创文章,如果对你有用,敬请带走! https://blog.csdn.net/chuck_kui/article/details/55506723 首先 上两个地址: 地址①ht ...
- pt-archiver（数据导入导出工具）
数据导入导出工具pt-archiver 工具可以将MySQL的表数据导出到一个新表或者一个文件,也有自己的应用场景,比如数据归档,删除数据,数据合并等. 具体用法: pt-archiver [OPTI ...
- 使用CoreImage教程
使用CoreImage教程 CoreImage包含有很多实用的滤镜,专业处理图片的库,为了能看到各种渲染效果,请使用如下图片素材. 现在可以开始教程了: #define FIX_IMAGE(image ...
- ACM HDU-2952 Counting Sheep
Counting Sheep Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
- 【深入理解JAVA虚拟机】第二部分.内存自动管理机制.4.JVM工具
1.概述 工具作用:性能监控与故障处理 工作原理:分析数据 数据包含:运行日志. 异常堆栈. GC日志. 线程快照(threaddump/javacore文件). 堆转储快照(heapdump/hpr ...
- February 17 2017 Week 7 Friday
The very essence of romance is uncertainty. 浪漫的精髓就在于它充满种种可能. If you want a happy life with enduring ...
- 理解Underscore中的节流函数
上一篇中讲解了Underscore中的去抖函数(_.debounced),这一篇就来介绍节流函数(_.throttled). 经过上一篇文章,我相信很多人都已经了解了去抖和节流的概念.去抖,在一段连续 ...