为什么jquery脚本不起作用？

Question

为什么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在这里

现在我的问题是:为什么代码在JsFiddle中工作但不在我的文档中？

谢谢你的回答!

编辑:添加文件就绪功能..仍然不起作用!

Answer 1

Samuel Liew是对的.有时jquery与其他jqueries冲突.要解决这个问题,你需要按照这样的顺序将它们放在一起,使它们不会相互冲突.做一件事:在谷歌浏览器中打开您的应用程序并检查右下角是否有红色标记错误.哪种错误是什么？

Answer 2

这对我有用:

<script>
     jQuery.noConflict();
     // Use jQuery via jQuery() instead of via $()
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });  
</script>

原因:"许多JavaScript库使用$作为函数或变量名称,就像jQuery一样.在jQuery的情况下,$只是jQuery的别名,所以所有功能都可以使用而不使用$".

阅读完整原因:https://api.jquery.com/jquery.noconflict/

如果这解决了您的问题,可能是另一个库也在使用$.

Answer 3

这很好用.只需在document.ready函数中插入jquery代码即可.

 $(document).ready(function(e) {   
    // your code here
 });

example:

jQuery的

    $(document).ready(function(e) {   

      $('[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');
      });

    });

HTML

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