jQ drop-down box to bind the event, why should bind on the box (select tag), not binding on the Options (option label)

This is a small problem I encountered in learning the code book sharp jquery 5.1.4, the source code is as follows:

<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>

This book is a sharp jquery 5.1.4 code. Display effect is this:

Double-click on the binding, binding in the sample code on the box (on select elements), when I practice it for granted bound on select inside option, the following code

$("#select1 option").dblclick(function () {
    $(this).appendTo("#select2")
});
$("#select2 option").dblclick(function () {
    $(this).appendTo("#select1")
});

Then on the problem, the option to move to the left to the right to go after, and then double-click can not be moved back to the left.

Later want to see, I use $(function(){})this entry point, just when the page has finished loading, in accordance with my wording, the event is bound to double-click on any existing option;

For the option on the left, the page is finished loading bound double-click events, you can double-click to move to the opposite side; but after moving past, this option will lose a double-click event, select the original elements of the right of the page has been loaded in when they were bound double-click events, and new mobile last option will not be bound with a double-click event, so click the element does not respond, it will not error.

But if bound to select, regardless of whether the option is aboriginal or new immigrants, provided that they meet the conditions picker, you can execute the corresponding function in the statement.

jQ drop-down box to bind the event, why should bind on the box (select tag), not binding on the Options (option label)

Guess you like