jQ给下拉框绑定事件,为什么要绑定在框(select标签)上,而不是绑定在选项(option标签)上

Posted lijianming180

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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" >选中添加到右边&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标签)上的主要内容,如果未能解决你的问题,请参考以下文章

MVVM下拉框绑定触发事件

MVVM下拉框绑定触发事件

MVVM下拉框绑定触发事件

C#DataGrid如何绑定其中一列为下拉框?并且获取值

yii中怎样用jq得到下拉框的值并赋值给文本框

easyui 绑定下拉框,下拉框选择改变事件的触发方法