[解決済み] jqueryスクリプトが動作しないのはなぜですか？

質問

jsfiddleでjQueryスクリプトが動作しているのに、私のページで動作しないのはなぜですか？

私がしたこと JQueryの様々なバージョンを試してみた...スクリプトを作った

そこで、こんなテストページができました。

ヘッド部

   <!-- Scripts -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
           <style>

            select #canselect_code {
                width:200px;
                height:200px;
            }
            .fr {
                float:right;
            }
            .fl {
                float:left;
            }


        </style>

        <script>
$(document).ready(function(){
            $('[id^=\"btnRight\"]').click(function (e) {
    
    $(this).prev('select').find('option:selected').remove().appendTo('#isselect_code');
    
});

$('[id^=\"btnLeft\"]').click(function (e) {

    $(this).next('select').find('option:selected').remove().appendTo('#canselect_code');

});

});
        </script>
       

</head>

本体部分

 <div>
    <select id='canselect_code' name='canselect_code' multiple class='fl'>
        <option value='1'>toto</option>
        <option value='2'>titi</option>
    </select>
    <input type='button' id='btnRight_code' value='  >  ' />
    <br>
    <input type='button' id='btnLeft_code' value='  <  ' />
    <select id='isselect_code' name='isselect_code' multiple class='fr'>
        <option value='3'>tata</option>
        <option value='4'>tutu</option>
    </select>
</div>

JSFIDDLEはこちら

そこで質問なのですが、なぜこのコードはJsFiddleでは動いているのに、私のドキュメントでは動かないのでしょうか？

ご回答ありがとうございました。

EDIT: ドキュメントレディ機能を追加しました.まだ動作しません!

解決するには？

Samuel Liewの言うとおりです。 時々、jqueryが他のjqueryと衝突することがあります。 この問題を解決するには、他のjqueryと衝突しないような順序で配置する必要があります。 Google Chromeでアプリケーションを開き、右下にある赤いマークのエラーを確認してください。 どのようなエラーなのでしょうか？