為什么 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 與其他 jquery 沖突。 要解決此問題，您需要將它們按順序排列，以免彼此沖突。 做一件事：在谷歌瀏覽器中打開你的應用程序並檢查右下角是否有紅色標記的錯誤。 這是哪種錯誤？

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:

查詢

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

Answer 4

將您的腳本包裝在就緒函數中。 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');
    });
});

這就是為什么您不應該使用第三方工具的原因，除非您知道它們為您自動化/簡化了什么。

Answer 5

這可能不是您正在尋找的答案，但可能會幫助其他人的 jquery 無法正常工作，或者有時無法正常工作。

這可能是因為您的 jquery 尚未加載並且您已開始與頁面交互。 要么將 jquery 放在頭上（可能不是一個好主意），要么使用加載器或微調器來阻止用戶與頁面交互，直到整個 jquery 加載完畢。

Answer 6

使用noConflict()方法

例如： jQuery.noConflict()

並通過jQuery()而不是通過$()使用 jQuery

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

Answer 7

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

Answer 8

如果您有其他一些與 jQuery 沖突的腳本，請用它包裝您的代碼

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