Est-ce un Uncaught TypeError jQuery viennent d'un conflit de code?

Question

page de connexion est une source d'inspiration pour beaucoup, et en tant que développeur de bricoleur que je cherchais à voir comment ils ont fait leur formulaire de connexion. J'ai enlevé le code superflu et est venu avec une version simplifiée, comme suit:

<div id="login_form_container">
    <form method="post" action="logged-in.html" id="login_form">  
        <div class="input_wrapper">
            <label for="login_email">Email address</label>
            <input type="text" name="email" id="login_email" value="">
        </div>
        <button type="submit"><span>Log In</span></button>
    </form>
</div>

Voyant que j'utilise jQuery 1.3 sur d'autres pages, j'essayé d'utiliser ce qui suit pour obtenir leurs effets agréables. Ce n'est pas tout à fait la façon dont ils l'ont, mais une version très simplifiée:

<script>
$("input#login_email").click(function () {
    $(".input_wrapper").addClass("blurred filled");
});  

$("input#login_email").blur(function () {
    $(".input_wrapper").removeClass("blurred");
});
</script>

Cela fonctionne bien et dandy quand c'est le seul code sur la page, mais quand je l'ai mis dans une page avec d'autres morceaux de jQuery, il renvoie une erreur de:

Uncaught TypeError: Cannot call method 'click' of null
    (anonymous function)

Il est le même que Chrome, Firefox ou Safari, il est donc clair que mon code.

Quelqu'un sait quel est le problème?

• Est-il susceptible d'être dû à des références contradictoires jQuery ailleurs dans la page (qui tout va bien de travail)?
• Est-il quelque chose de plus évident?
• Est-ce parce que je ne l'ai pas nommé les fonctions?

Je suis perplexe quant à la raison pour laquelle le code fonctionne en vase clos, mais pas lorsqu'il est combiné avec d'autres éléments dans une page. Cela m'a déconcerté.

Answer 1

Alter votre script comme celui-ci

<script src="jquery.js"></script>
<script type='text/javascript'>

jQuery.noConflict();
jQuery("input#login_email").click(function () {
    jQuery(".input_wrapper").addClass("blurred filled");
});  

jQuery("input#login_email").blur(function () {
    jQuery(".input_wrapper").removeClass("blurred");
});
</script>