为什么 jquery 脚本不工作？

为什么 jQuery 脚本可以在我的 jsfiddle 中运行，但不能在我的页面中运行？

我所做的：尝试了不同版本的 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 在这里 http://jsfiddle.net/7785m/

现在我的问题是：为什么代码在 JsFiddle 中有效，但在我的文档中却无效？

感谢您的回答！

编辑：添加文档准备功能..仍然不起作用！

塞缪尔·刘是对的。 有时 jquery 会与其他 jquery 发生冲突。 要解决这个问题，您需要将它们按顺序排列，以免彼此冲突。 做一件事：在谷歌浏览器中打开您的应用程序并检查右下角是否有红色标记的错误。 这是哪一种错误？