Uncaught TypeError в jQuery происходит из-за конфликта кода? - PullRequest
Новая
       12

Uncaught TypeError в jQuery происходит из-за конфликта кода?

2 голосов
/ 07 января 2011

Страница входа в Tumblr вдохновляет многих, и как разработчик-любитель я искал, как они создали свою форму входа.Я забрал лишний код и придумал упрощенную версию, например так: 

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

Видя, как я использую jQuery 1.3 на других страницах, я попытался использовать следующее, чтобы получить иххорошие эффекты.Это не совсем так, как у них, но очень упрощенная версия: 

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

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

Это прекрасно работает, когда это единственный код на странице, но когда я помещаю его на страницу с другими битамиjQuery возвращает ошибку: 

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

Это то же самое, что Chrome, Firefox или Safari, так что это просто мой код.

Кто-нибудь знает в чем проблема?

  • Вероятно ли это из-за конфликтующих ссылок jQuery в других местах страницы (которые все работают нормально)?
  • Это что-то более очевидное?
  • Это потому, что яя не назвал функции?

Я озадачен тем, почему код работает изолированно, а не в сочетании с другими элементами на странице.Это поставило меня в тупик.

1 Ответ

5 голосов
/ 07 января 2011

Измените ваш сценарий следующим образом 

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