为什么 jquery 脚本不起作用？

Why is the jquery script not working?

提问by Acelasi Eu

Why is the jQuery script working in my jsfiddle but not in my page?

为什么 jQuery 脚本在我的 jsfiddle 中有效，但在我的页面中无效？

What I've done: Tried different versions of JQuery...made the script

我所做的：尝试了不同版本的 JQuery...制作了脚本

So I have this test page:

所以我有这个测试页面：

Head Part

头部

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

Body Part

身体的一部分

 <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 在这里

Now my question is: Why is the code working in JsFiddle but not in my document?

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

Thanks for your answers!

感谢您的回答！

EDIT: Added document ready function..still does not work!

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

回答by Dirty Developer

Samuel Liew is right. sometimes jquery conflict with the other jqueries. to solve this problem you need to put them in such a order that they may not conflict with each other. do one thing: open your application in google chrome and inspect bottom right corner with red marked errors. which kind of error that is?

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

回答by Jayden Lawson

This worked for me:

这对我有用：

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

Reason: "Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $".

原因：“许多 JavaScript 库使用 $ 作为函数或变量名，就像 jQuery 一样。在 jQuery 的情况下，$ 只是 jQuery 的别名，因此所有功能都可用，无需使用 $”。

Read full reason here: https://api.jquery.com/jquery.noconflict/

在此处阅读完整原因：https: //api.jquery.com/jquery.noconflict/

If this solves your issue, it's likely another library is also using $.

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

回答by Arul

This works fine. just insert your jquery code in document.ready function.

这工作正常。只需在 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

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>

回答by Samuel Liew

Wrap your script in the ready function. jsFiddle does that automatically for you.

将您的脚本包装在就绪函数中。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');
    });
});

This is why you should not use third party tools unless you know what they automate/simplify for you.

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

回答by DragonFire

This may not be the answer you are looking for, but may help others whose jquery is not working properly, or working sometimes and not at other times.

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

This could be because your jquery has not yet loaded and you have started to interact with the page. Either put jquery on top in head (probably not a very great idea) or use a loader or spinner to stop the user from interacting with the page until the entire jquery has loaded.

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

回答by mohamed ruzaik

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

回答by Chandrasagar Patel

Use noConflict()method

使用noConflict()方法

ex:jQuery.noConflict()

前任：jQuery.noConflict()

and Use jQuery via jQuery() instead of via $()

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

Ex:jQuery('#id').val(); instead of $('#id').val();

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

回答by paka

if you have some other scripts that conflicts with jQuery wrap your code with this

如果您有其他一些与 jQuery 冲突的脚本，请用它包装您的代码

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