web-dev-qa-db-fra.com

Pourquoi le script jQuery ne fonctionne-t-il pas?

Pourquoi le script jQuery fonctionne-t-il dans mon jsfiddle mais pas dans ma page? 

Ce que j'ai fait: J'ai essayé différentes versions de JQuery ... créé le script

J'ai donc cette page de test:

Partie de tête

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

Partie du corps

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

Maintenant ma question est: pourquoi le code fonctionne-t-il dans JsFiddle mais pas dans mon document?

Merci pour vos réponses!

EDIT: Ajout de la fonction de préparation de document..Cependant ne fonctionne pas!

javascriptjqueryhtmlcss
6
Acelasi Eu

Samuel Liew a raison. Parfois, vous vous trouvez en conflit avec les autres pays. Pour résoudre ce problème, vous devez les placer dans un ordre tel qu'ils ne puissent pas entrer en conflit les uns avec les autres. Faites une chose: ouvrez votre application dans Google Chrome et inspecter le coin inférieur droit avec des erreurs marquées en rouge . quel type d'erreur qui est?

7
Dirty Developer

Cela a fonctionné pour moi:

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

Motif: "De nombreuses bibliothèques JavaScript utilisent $ comme nom de fonction ou de variable, comme jQuery. Dans le cas de jQuery, $ est simplement un alias pour jQuery, de sorte que toutes les fonctionnalités sont disponibles sans utiliser $". 

Lire le motif complet ici: https://api.jquery.com/jquery.noconflict/

Si cela résout votre problème, il est probable qu'une autre bibliothèque utilise également $.

7
Jayden Lawson

Cela fonctionne bien. insérez simplement votre code jQuery dans la fonction document.ready.

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

Enveloppez votre script dans la fonction prêt. jsFiddle le fait automatiquement pour vous. 

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

C'est pourquoi vous ne devez pas utiliser d'outils tiers si vous ne savez pas ce qu'ils automatisent/simplifient pour vous.

2
Samuel Liew

Ce n'est peut-être pas la solution que vous recherchez, mais peut aider d'autres personnes dont le test ne fonctionne pas correctement ou qui fonctionne parfois et pas à d'autres moments.

Cela peut être dû au fait que votre jquery n’a pas encore été chargé et que vous avez commencé à interagir avec la page. Soit vous placez jquery en tête (probablement pas une très bonne idée), soit utilisez un chargeur ou une centrifugeuse pour empêcher l’utilisateur d’interagir avec la page jusqu’à ce que l’ensemble de la requête ait été chargé.

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