为什么 jquery 脚本不起作用？答案

【问题标题】：Why is the jquery script not working?为什么 jquery 脚本不起作用？
【发布时间】：2013-11-18 18:55:22
【问题描述】：

为什么 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 HERE

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

感谢您的回答！

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

将您的脚本包装在 ready 函数中。 jsFiddle 会自动为您完成。

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

这就是为什么您不应该使用第三方工具，除非您知道它们为您自动化/简化了什么。

【讨论】：

【解决方案2】：

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

【讨论】：

无法加载资源文件://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js 未捕获的ReferenceError: $ is not defined test.html:29 Failed加载资源

【解决方案3】：

如果你有其他一些与 jQuery 冲突的脚本，用这个包装你的代码

(function($) {
    //here is your code
})(jQuery);

【讨论】：

目前为止的负数？任何cmets？）
你可能想用这个：$(function(){ // jQuery 方法在这里... });

【解决方案4】：

这很好用。只需在 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>

【讨论】：

js fiddle 在 onload 事件中自动调用我们的 js 代码。但是当我们在文档中使用时，我们需要在文档onload函数或document.ready函数中调用该函数。

【解决方案5】：

这对我有用：

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

如果这解决了您的问题，则很可能另一个库也在使用 $。

【讨论】：

确实.. 为什么？ :P
感谢自己多年后的回答：D

【解决方案6】：

使用noConflict()方法

例如：jQuery.noConflict()

并通过jQuery() 使用jQuery，而不是通过$()

例如：jQuery('#id').val(); 而不是 $('#id').val();。

【讨论】：

【解决方案7】：

这可能不是您正在寻找的答案，但可能会帮助其他 jquery 无法正常工作或有时工作但有时不工作的人。

这可能是因为您的 jquery 尚未加载并且您已开始与页面交互。要么将 jquery 放在顶部（可能不是一个好主意），要么使用加载器或微调器来阻止用户与页面交互，直到整个 jquery 加载完毕。

【讨论】：

【解决方案8】：

<script type="text/javascript" >
    do your codes here  it will work..
    type="text/javascript" is important for jquery 
<script>

【讨论】：