2009-07-17 4 views
1

C'est ce que jeasp.net JQuery .hover événement donne à "objet prévu" erreur

Sur ma page .master j'ai les suivantes

<script type="text/javascript"> 
$(document).ready(function() { 
    $(this).hover(function() { 
     $(this).addClass("ui-state-hover"); 
    }, 
     function() { 
      $(this).removeClass("ui-state-hover"); 
     } 
    ).mousedown(function() { 
     $(this).addClass("ui-state-active"); 
    }) 
    .mouseup(function() { 
     $(this).removeClass("ui-state-active"); 
    }); 
}); 

et mon asp. boutons nets sont déclarés comme suit

<asp:button runat="server" id="cmdSubmitShipmentRequest" cssclass="ui-button ui-state-default ui-corner-all" text="Submit" /> 

le comportement attendu est que chaque fois que le pointeur de la souris dans et sur n'importe quel bouton, les classes css déclarées ci-dessus sont ajoutées et supprimées. Actuellement, les propriétés css par défaut s'appliquent correctement, mais chaque fois que je survole un bouton, j'obtiens l'erreur suivante "Objet attendu" Ligne 11 (IE8 autres navigateurs n'affiche rien), qui est la position où commence "<script type="text/javascript">".

aucune idée de ce que je peux faire mal?

EDIT AVEC RÉPONSE


je faisais deux choses mauvaises

  1. j'utilisais $ (ce) .hover aurions dû été $ ('ui-bouton'). hover que j'avais initialement mais je l'ai tapé comme $ (". ui-button"). hover AVIS LES DOUBLES CITATIONS!

  2. Sur ma .master la page Je déclare mon javascript en utilisant le asp.net javascript gestionnaire comme suit

le problème était que j'avais les déclarations de script ci-dessous mon bloc de code javascript !. En fin de compte, voici à quoi ressemblent le javascript et le bloc de code et tout fonctionne bien comme prévu.

<asp:scriptmanager id="scriptManager" runat="server"> 
    <scripts> 
     <asp:scriptreference path="~/javascript/jquery-1.3.2.min.js" /> 
     <asp:scriptreference path="~/javascript/jquery-ui-1.7.2.custom.min.js" /> 
     <asp:scriptreference path="~/Javascript/thickbox.js" /> 
    </scripts> 
</asp:scriptmanager> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.ui-button').hover(function() { 
      $(this).addClass("ui-state-hover"); 
     }, 
      function() { 
       $(this).removeClass("ui-state-hover"); 
      } 
     ).mousedown(function() { 
      $(this).addClass("ui-state-active"); 
     }) 
     .mouseup(function() { 
      $(this).removeClass("ui-state-active"); 
     }); 
    }); 
</script> 
+0

$ (this) .hover (...). Qu'est-ce que c'est dans ce contexte? Essayez-vous d'appliquer ceci uniquement aux boutons ou au document? Faute de frappe? –

Répondre

3

Essayez de changer votre code à cette ....

$(document).ready(function() { 
    //SELECT THE .ui-button CLASS INSTEAD OF this 
    $('.ui-button').hover(function() { 
     $(this).addClass("ui-state-hover"); 
    }, 
       function() { 
        $(this).removeClass("ui-state-hover"); 
       } 
     ).mousedown(function() { 
      $(this).addClass("ui-state-active"); 
     }) 
     .mouseup(function() { 
      $(this).removeClass("ui-state-active"); 
     }); 
}); 

Je ne crois pas que « ce » a le contexte que vous ciblez lorsque vous utilisez cette ligne de code ...

$(this).hover(function() { 

Essayez de remplacer la ligne ci-dessus à ce qui suit ...

$('.ui-button').hover(function() { 
+0

J'avais utilisé "ui-button" dans le passé mais j'ai utilisé des guillemets plutôt que des guillemets simples! aussi j'ai eu le code JavaScript ci-dessus au-dessus de mes déclarations de jquery, aussi merci pour la réponse rapide –

+0

guillemets doubles travailleraient aussi, la clé ici est le. sur ".ui-button" –

1

cela vous donnerait-il plus de ce que vous voulez?

également, assurez-vous d'inclure la bibliothèque jquery quelque part au-dessus.

$(document).ready(function() { 
    $('.ui-button').hover(function() { 
     $(this).addClass("ui-state-hover"); 
    }, 
       function() { 
        $(this).removeClass("ui-state-hover"); 
       } 
     ).mousedown(function() { 
      $(this).addClass("ui-state-active"); 
     }) 
     .mouseup(function() { 
      $(this).removeClass("ui-state-active"); 
     }); 
}); 
1

Dans votre extrait de code actuel, $ (this) fait référence à $ (document).Essayez ceci:

$(document).ready(function() { 
    $('.ui-button').hover(function() { 
     $(this).addClass("ui-state-hover"); 
    }, <rest of code omitted> 
} 

maintenant $ (ce) fait référence à $ ('ui-bouton.'), Qui est ce que vous voulez.