jQ给下拉框绑定事件,为什么要绑定在框(select标签)上,而不是绑定在选项(option标签)上
这是我在学习锋利的 jquery 书中 5.1.4 的代码时遇到的一个小问题,源代码如下:
<head>
<style type="text/css">
* { margin:0; padding:0; }
div.centent {
float:left;
text-align: center;
margin: 10px;
}
span {
display:block;
margin:2px 2px;
padding:4px 10px;
background:#898989;
cursor:pointer;
font-size:12px;
color:white;
}
</style>
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//移到右边
$('#add').click(function() {
//获取选中的选项,删除并追加给对方
$('#select1 option:selected').appendTo('#select2');
});
//移到左边
$('#remove').click(function() {
$('#select2 option:selected').appendTo('#select1');
});
//全部移到右边
$('#add_all').click(function() {
//获取全部的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function() {
$('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').dblclick(function(){ //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo('#select2'); //追加给对方
});
//双击选项
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
});
});
</script>
</head>
<body>
<!--左边-->
<div class="centent">
<select multiple="multiple" id="select1" style="width:100px;height:160px;"> <!--multiple 可以选择多个选项-->
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
大专栏 jQ给下拉框绑定事件,为什么要绑定在框(select标签)上,而不是绑定在选项(option标签)上 <div>
<span id="add" >选中添加到右边>></span>
<span id="add_all" >全部添加到右边>></span>
</div>
</div>
<!--右边-->
<div class="centent">
<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
<option value="8">选项8</option>
</select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
</body>
</html>
这是锋利的 jquery 书中 5.1.4 的代码。显示的效果是这样的:
在双击的绑定上,示例代码绑定在了框上(select 元素上),我自己练习的时候想当然的就绑定在了 select 里面的 option 上,代码如下
$("#select1 option").dblclick(function () {
$(this).appendTo("#select2")
});
$("#select2 option").dblclick(function () {
$(this).appendTo("#select1")
});
然后就出问题了,左边的选项移动到右面去之后,再双击无法移动回左边。
后来想明白了,我用了$(function(){})
这个入口函数,在页面刚加载完成的时候,按照我的写法,把双击事件绑定到了现有的所有 option 上;
对于左边的 option,在页面加载完后被绑定了双击事件,双击可以移动到对面去;但是移动过去之后,这个 option 就失去了双击事件了,右边的 select 原有的元素已经在页面加载的时候被绑定了双击事件了,新移动过去的 option 也不会被再绑定一次双击事件,所以双击该元素没有反应,也不会报错。
但如果绑定在 select 上,不管这个 option 是原住民还是新移民,只要符合选择器里的条件,都可以执行对应的 function 里的语句。
jQ给下拉框绑定事件,为什么要绑定在框(select标签)上,而不是绑定在选项(option标签)上的更多相关文章
- select change下拉框改变事件 设置选定项,禁用select
select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身)
jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...
- jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单
jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单 截图: 代码如下: //关闭用户菜单 $(document).mousedown(function(e){ var _con = ...
- jq遍历 下拉框
var selectA1 = $("select[name=A1]"); //从A1下拉框中 搜索值 $(selectA1).children("option" ...
- Web 前端实战:JQ 实现下拉菜单
实现过程 实现一个简易的鼠标悬停菜单项显示其子项的下拉框控件.将用到 CSS 绝对定位.流式布局.动画等:JQuery 鼠标移入和移出事件.DOM 查找.效果图如下: HTML 结构: <div ...
- JS之document例题讲解1(两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结)
作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...
- 前端jq设置下拉框的,单选框,复选框的帖子
$(function(){ var sex=$("#sex").val(); var marriageStatus=$("#marriageStatus").v ...
- JQ实现下拉加载更多
var x=0; var isloading=0; function getUsersLimited(data) { list = list.concat(data); buildList(list) ...
- 点击下拉选择触发事件【c#】
<asp:DropDownList ID="ddlRegionList" runat="server" AutoPostBack="true&q ...
随机推荐
- mybatis中#{}和${}的区别及order by的sql注入问题
mybatis的#{}和${}的区别以及order by注入问题 原文 http://www.cnblogs.com/chyu/p/4389701.html 前言略,直奔主题.. #{}相当于j ...
- ES6 之 Integer数据类型
1.简介(仅仅是提案) js所有数字都保存成64为浮点数,这就决定了整数的精确程度只能到53个二进制位. 大于这个范围的整数,js是无法精确表示的,这使得js不合适进行科学和金融方面的精确计算. 故引 ...
- preg_match()//explode()// 输出函数//assert()//trim()
1.preg_match() 这是一个正则表达式匹配的函数,其用法如下: 查找文本字符串"php": <?php //模式分隔符后的"i"标记这是一个大小 ...
- Redhat7 开机启动服务
#!/bin/sh ### BEGIN INIT INFO # Provides: jboss # Required-Start: $local_fs $remote_fs $network $sys ...
- CommandNotFoundError: No command 'conda conda'.
出现情形 当前conda版本:4.6.11 当使用git bash,无论是在vscode中,还是在桌面上打开bash,都会出现这个错误.但是在cmd中,就可以识别conda命令. 解决 该错误只在4. ...
- 2020/1/28 PHP代码审计之代码执行漏洞
0x00代码执行原理 应用程序在调用一些能够将字符串转换为代码的函数(如PHP中的eval)时,没有考虑用户是否控制这个字符串,将造成代码执行漏洞. 该漏洞主要存在于eval().assert().p ...
- elasticsearch-填坑
1.分页参数 ,start=(page-1)*size 2.高亮字段结果的处理方式 3.float类型参数从map中取出用double接收 4.结果封装需手动封装 package com.search ...
- mysql my.cnf常用的配置
[mysqld]basedir = /usr/local/mysql/datadir = /usr/local/mysql/dataport = 3306pid-file = /usr/local/m ...
- js中要声明变量吗?
你好,js语言是弱类型语言,无需申明即可直接使用,默认是作为全局变量使用的.建议:在function里时应使用var 申明变量,这样改变量仅仅只在function的生存周期内存在,不会污染到,全局控件 ...
- 深入理解JVM - JVM内存模型
各版本的差异 JDK1.6 在JDK1.6 的时候运行时常量池在方法区中 JDK1.7 在JDK1.7 的时候运行时常量池在堆中 JDK1.8 在JDK1.8 的时候,JVM内存模型直接将方法区移到了 ...