这是我在学习锋利的 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" >选中添加到右边&gt;&gt;</span>
<span id="add_all" >全部添加到右边&gt;&gt;</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">&lt;&lt;选中删除到左边</span>
<span id="remove_all">&lt;&lt;全部删除到左边</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标签)上的更多相关文章

  1. select change下拉框改变事件 设置选定项,禁用select

    select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  2. jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身)

    jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...

  3. jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单

    jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单 截图: 代码如下: //关闭用户菜单 $(document).mousedown(function(e){ var _con = ...

  4. jq遍历 下拉框

    var selectA1 = $("select[name=A1]"); //从A1下拉框中 搜索值 $(selectA1).children("option" ...

  5. Web 前端实战:JQ 实现下拉菜单

    实现过程 实现一个简易的鼠标悬停菜单项显示其子项的下拉框控件.将用到 CSS 绝对定位.流式布局.动画等:JQuery 鼠标移入和移出事件.DOM 查找.效果图如下: HTML 结构: <div ...

  6. JS之document例题讲解1(两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结)

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  7. 前端jq设置下拉框的,单选框,复选框的帖子

    $(function(){ var sex=$("#sex").val(); var marriageStatus=$("#marriageStatus").v ...

  8. JQ实现下拉加载更多

    var x=0; var isloading=0; function getUsersLimited(data) { list = list.concat(data); buildList(list) ...

  9. 点击下拉选择触发事件【c#】

    <asp:DropDownList ID="ddlRegionList" runat="server" AutoPostBack="true&q ...

随机推荐

  1. pyecharts绘制地图可视化

    pyecharts:官方文档 我们这里使用pyecharts模块进行绘图. pyecharts 项目包含了一系列的地理地图数据,这些数据或者已经内置,或者需要额外安装和加载,我们需要下载下面六个包. ...

  2. mysql插入文本文档及读取

    1.把本地的一个文件插入到数据库中,数据库字段用text保存 public static void main(String[] args) { PropKit.use(“pro.txt”);Druid ...

  3. ES6 之 第七种数据类型Symbol

    概述 为了减少对象的属性名冲突,ES6引入新的原始数据类型Symbol,JS的第七种数据类型. Symbol 能够保证每个属性的名字都是独一无二,这样就能从根本上防止属性名冲突. Symbol 值能够 ...

  4. 编写注册表.reg文件

    Windows 中的注册表文件( system.dat 和 user.dat )是 Windows 的核心数据库,因此,对 Windows 来说是非常重要的. 通过修改注册表文件中的数据,可以达到优化 ...

  5. 吴裕雄--天生自然MySQL学习笔记:MySQL 连接

    使用mysql二进制方式连接 您可以使用MySQL二进制方式进入到mysql命令提示符下来连接MySQL数据库. 实例 以下是从命令行中连接mysql服务器的简单实例: [root@host]# my ...

  6. 关于debug模式下对象toString报空指针的问题。Method threw 'java.lang.NullPointerException' exception. Cannot evaluate cn.gooday.jsh.service.common.dto.RestControllerResult.toString()

    这个如果debug的时候可以一步步走到正常return或者运行的时候有正确返回值.说明代码是没问题的. 出现这个的原因是dto对象里有一些字段查出来是空的,或者这个字段本来在dto里就是冗余字段. 因 ...

  7. JavaScript—封装animte动画函数

    封装Animte 动画函数 虽然可能以后的开发中可能根本不需要自己写,Jquery 给我们封装好了,或者用CSS3的一些属性达到这样的效果可能更简单. 我比较喜欢底层的算法实现,万变不离其中,这个逻辑 ...

  8. Android开发—错误记录1:W/System.err: java.net.ConnectException: Connection refused

    W/System.err: java.net.ConnectException: Connection refused 前台访问后台时,出现访问被拒绝情况:W/System.err: java.net ...

  9. DVWA-目录遍历-文件包含

    开门见山 · 目录遍历 替换成 2. 文件包含可以使用 绝对路径 也可以 3. 可以使用文件包含来包含一个网址,或者是一个shell 远程文件 空字符绕过字符过滤 %00

  10. PAT Advanced 1070 Mooncake (25) [贪⼼算法]

    题目 Mooncake is a Chinese bakery product traditionally eaten during the Mid-Autumn Festival. Many typ ...