2010-12-10 9 views
0

mon intention est de cacher un élément div dès que le bouton hide est cliqué. Mais le navigateur reste silencieux quand j'ai cliqué sur le bouton cacher.animer dans jquery ne pas tirer

Voici mon code

 
$.fn.slideFadeToggle = function(easing, callback) { 
     return this.animate({ opacity: 'toggle', height: 'toggle' }, "slow", easing, callback); 
    }; 

    $("#hid").click(function(){ 
     alert('here'); 
     $("#result").slideFadeToggle(); 
    }); 

Hid est l'id du bouton qui, cliqué devrait effectivement cacher la div. L'alerte à l'intérieur de la fonction de clic ne fonctionne pas non plus.

result est l'ID de la div à masquer. des idées?

+0

fonctionne bien? http://www.jsfiddle.net/4yUqL/19/ – jAndy

+0

cela ne fonctionne pas ici. J'ai inclus les bibliothèques jquery. Je n'ai pas une idée de wats mal dans ce code – CHID

Répondre

2

L'alerte à l'intérieur de la fonction de clic ne fonctionne pas non plus.

qui suggérerait au moment où vous faites votre $("#hid").click(..., l'élément avec l'ID hid n'existe pas encore dans les DOM. Vous ne pouvez pas accéder aux éléments DOM avant qu'ils ne soient créés.

Trois façons de vous assurer qu'ils ont été créés avant d'essayer d'y accéder sont d'utiliser la fonction simplement pour assurer que votre code de script jQuery ready est chargé après l'élément en question, ou d'utiliser jQuery de live fonctionnalité.

Ainsi par exemple, cela échouera:

<html> 
... 
<script type='text/javascript' src='jquery.js'></script> 
<script type='text/javascript'> 
    $("#hid").click(...); 
</script> 
</head> 
<body> 
<div id='hid'>...</div> 
... 

Mais cela fonctionnera (via un raccourci pour ready):

<html> 
... 
<script type='text/javascript' src='jquery.js'></script> 
<script type='text/javascript'> 
    jQuery(function($) { 
     $("#hid").click(...); 
    }); 
</script> 
</head> 
<body> 
<div id='hid'>...</div> 
... 

Comme on ce (parce que le script est situé après l'élément dans le balisage):

<html> 
... 
<script type='text/javascript' src='jquery.js'></script> 
</head> 
<body> 
<div id='hid'>...</div> 
<script type='text/javascript'> 
    $("#hid").click(...); 
</script> 
... 

... ce dernier étant la façon dont l'équipe de Google derrière Closurerecommend; De même, le YUI team recommend en mettant vos scripts juste avant la fermeture de votre tag body, ce qui revient au même.

Et cela fonctionnera (via live):

<html> 
... 
<script type='text/javascript' src='jquery.js'></script> 
<script type='text/javascript'> 
    $("#hid").live('click', ...); 
</script> 
</head> 
<body> 
<div id='hid'>...</div> 
... 
+0

mais la page est entièrement chargée et alors seulement nous cliquons sur le bouton droit? à ce moment-là, l'arbre dom devrait être chargé? Corrigez-moi si je me trompe. Je ne suis pas expertisé – CHID

+1

@ CHID: Peu importe quand vous cliquez sur le bouton. L'élément doit exister au moment de la configuration de votre gestionnaire de clic. sinon, '$ (" # hid ")' renvoie un objet jQuery vide et il n'y a rien pour connecter le gestionnaire. –

+0

merci beaucoup de poudre. les changements ont bien fonctionné. a eu le problème et l'a résolu – CHID

0

Eh bien, ça marche pour moi en chrome: jsfiddle

-vous importer jquery avant que le code?

+0

oui j'ai inclus la bibliothèque jquery de google api – CHID