下拉框操作的问题

请帮我看下下面关于下拉框操作的代码，是《锋利的jquery》里的例子，本人’双击选项时选项左移’操作的jq代码存在问题：

    <div class="wrapper">
        <div class="l-div">
            <select multiple id='l-select' class="sel">
                <option>选项1</option>
                <option>选项2</option>
                <option>选项3</option>
                <option>选项4</option>
            </select>
        </div>
        <div class="r-div">
            <select multiple id="r-select" class="sel">
            </select>
        </div>
    </div>
    （正确代码↓）
    <script type="text/javascript">
    $('#l-select').dblclick(function(){
        $('#r-select').append($('option:selected',this));
    })
    $('#r-select').dblclick(function(){
        $('#l-select').append($('option:selected',this));
    })
    </script>
    
    （本人代码↓）
    <script type="text/javascript">
    $('#l-select option').dblclick(function(){
        $('#r-select').append(this);
    })
    $('#r-select option').dblclick(function(){
        $('#l-select').append(this);
    })
    </script>
    

本人代码可以实现选项右移，但无法左移。双击右边选项左移时，被双击的选项仍append到右边的r-select框而不是计划中的左边l-select框，就是说选项即使右移了，但其事件触发后执行的代码似乎仍是
$('#r-select').append(this)，
即无法移到左边;为什么会这样，求大神解答！！

---

$('#l-select option').dblclick(function(){
    $('#r-select').append(this);
    console.log($(this).parent())    //它父亲的id其实一直是l-select
})

$('#r-select option').dblclick(fn) 是给#r-select option 绑定双击，所以触发都是上面那个函数（并不触发另一个函数），而正确代码是给#r-select 绑定双击事件，然后选择选中的选插入另一个容器，所有没问题。