jQのイベントをバインドするには、ドロップダウンボックス、なぜオプション（オプションのラベル）を拘束するものではない、ボックス（selectタグ）にバインドする必要があります

これは私が次のようにコードブックシャープ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のコードです。ディスプレイの効果はこれです：

私は選択の内側オプションにバインド付与し、次のコードのためにそれを練習するとき、（選択要素に）ボックスのサンプルコードで結合、結合をダブルクリックします

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

次に問題に、オプションは後に行くために左から右へ、その後、ダブルクリックが戻って左に移動することはできませんに移動します。

その後、私が使用し、見たい$(function(){})ページが私の文言に従い、イベントがダブルクリックをするために、既存のオプションにバインドされ、完成ロードを持っているちょうどその時、このエントリポイントを、

完成荷重をダブルクリックイベントをバインド左のオプションについては、ページには、あなたは反対側に移動するためにクリック倍増させることができている。しかし、過去を移動した後、このオプションは、ダブルクリックイベントを失うことになる、ページの右側のオリジナルの要素を選択してロードされていますそれらが結合されたときに要素ないの応答、それはしません、エラーをクリックして、イベントをダブルクリックし、新しいモバイル最後のオプションは、ダブルクリックイベントにバインドされることはありません。

選択するためにバインドされた場合でも、関係なく、オプションは、彼らが条件ピッカーを満たしていなければならない、先住民や新しい移民であるかどうかの、あなたは声明の中で、対応する機能を実行することができます。

jQのイベントをバインドするには、ドロップダウンボックス、なぜオプション（オプションのラベル）を拘束するものではない、ボックス（selectタグ）にバインドする必要があります

おすすめ