这是我在学习锋利的 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. nodejs（8） 使用ejs渲染动态页面

    使用ejs渲染动态页面 步骤: 安装 ejs 模板引擎npm i ejs -S 使用 app.set() 配置默认的模板引擎 app.set('view engine', 'ejs') 使用 app. ...

  2. FZU_1683 矩阵快速幂 求和

    这个题目确实是很简单的一个矩阵快速幂,但是我在求和的时候,用的是标准的求和,即,一共计算logN次Ak,但是这样会超时. 后来就发现原来本身和Sn=Sn-1+Fn:即Sn本身可以写在矩阵当中,所以直接 ...

  3. Python说文解字_详解元类

    1.深入理解一切接对象: 1.1 什么是类和对象? 首先明白元类之前要明白什么叫做类.类是面向对象object oriented programming的重要概念.在面向对象中类和对象是最基本的两个概 ...

  4. MacOS最佳思维导图推荐-MindNode 7

    思维导图软件哪个比较好呢?MindNode for mac下载一款功能简单,界面简洁,不用看教程都会用的思维导图软件.mindnode 7 mac版可随时随地记录自己的想法,让您从灵感入手,将奇思妙想 ...

  5. python编程：从入门到实践----基础知识>第4章练习

    4-1 比萨 :想出至少三种你喜欢的比萨,将其名称存储在一个列表中,再使用for 循环将每种比萨的名称都打印出来. a.修改这个for 循环,使其打印包含比萨名称的句子,而不仅仅是比萨的名称.对于每种 ...

  6. cookie保存

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  7. 如何使用keras加载下载好的数据集

    https://blog.csdn.net/houchaoqun_xmu/article/details/78492718 [keras]解决 example 案例中 MNIST 数据集下载不了的问题 ...

  8. 关系数据库和NOSQL比较

    关系数据库 NOSQL 功能:       NOSQL            功能简单           基本只支持主键查询,有的NOSQL支持非主键查询(不过非主键查询时,其性能也很慢),很少有N ...

  9. linux安装java步骤

    本文转发自博客园-Q鱼丸粗面Q.博客园-郁冬的文章,内容略有改动 本文已收录至博客专栏linux安装各种软件及配置环境教程中 方式一:yum方式下载安装 1.查找java相关的列表 yum -y li ...

  10. Python基础学习五

    Python基础学习五 迭代 for x in 变量: 其中变量可以是字符串.列表.字典.集合. 当迭代字典时,通过字典的内置函数value()可以迭代出值:通过字典的内置函数items()可以迭代出 ...