jQuery работает в jsFiddle, но не на моем компьютере

Я новичок в jQuery и весь день ломал голову, пытаясь определить, почему этот скрипт работает в jsFiddle, но не на моем компьютере. У меня нет настройки сервера, я просто запускаю html в своем браузере с рабочего стола.

Код отлично работает здесь: http://jsfiddle.net/9Dubr/164/. Однако, когда я создаю следующий html-файл:

<html>
<head>
<title>this better work</title>

<script src="jquery-latest.js"></script>
<script type="text/javascript">
$('#submit').click(function(){
    $('#myfrom').fadeOut("slow", function(){
    var dot = $("<div id='foo'>Goodmorning Mr. Patti<br/><br/>Thank you.</div>".hide();
    $(this).replaceWith(dot);
    $('#foo').fadeIn("slow");
    });
    });
    </script> 
<style type="text/css">

#container{
width:342px;
height:170px;
padding:10px;
background-color:grey;
}
#myform{
width:322px;
height:100px;
color:#6F6F6F;
padding: 0px;
outline:none;
background-color:white;
}
#foo{
width:322px;
height:100px;
color:#6F6F6F;
padding: 0px;
outline:none;
background-color:white;
}
#submit{
color:#6F6F6F;
padding: 10px 2px 0px 0px;
margin: 0px 0px 0px 0px;
outline:none;
}
</style>
</head>
<body>
<div id="container">
<div id="myform">
<p> blah blah blah blah blah </p>
 <input id="submit" value="send" type="submit"/>
</div>
</div>
</body>
</html>

Я не получаю никаких результатов, когда нажимаю кнопку отправки. Пожалуйста, помогите, я потратил на это 6 часов.

Спасибо,


jquery jsfiddle
person John Smith    schedule 06.03.2012    source источник
comment
Вы включили jQuery? jQuery автоматически загружается в Jfiddler, но в противном случае вам придется загружать его вручную.   -  person enderskill    schedule 06.03.2012
comment
да... см. строку 5 ‹script src=jquery-latest.js›‹/script›   -  person John Smith    schedule 06.03.2012
comment
@JohnSmith Существует ли файл jquery-latest.js в том же каталоге, что и ваш HTML-файл? Видите ли вы что-нибудь в консоли ошибок вашего браузера?   -  person Phil    schedule 06.03.2012
comment
Сделайте это на готовом доме, как я написал выше. Почему вы используете JQ 1.5? Последняя версия 1.7.1...   -  person elclanrs    schedule 06.03.2012
comment
@clclanrs Я сделал, все еще никаких результатов.   -  person John Smith    schedule 06.03.2012

Ответы (3)


arrow_upward
6
arrow_downward

Вы должны выполнить код в готовом DOM. Оберните свой код в $(function(){ }); Кроме того, вам не хватает ).

$(function () {
    $('#submit').click(function () {
        $('#myfrom').fadeOut("slow", function () {
            var dot = $("<div id='foo'>Goodmorning Mr. Patti<br/><br/>Thank you.</div>").hide();
            $(this).replaceWith(dot);
            $('#foo').fadeIn("slow");
        });
    });

});

ИЗМЕНИТЬ:

<!DOCTYPE html>
<html>
<head>
<title>This better work</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $('#submit').click(function () {
        $('#myfrom').fadeOut("slow", function () {
            var dot = $("<div id='foo'>Goodmorning Mr. Patti<br/><br/>Thank you.</div>").hide();
            $(this).replaceWith(dot);
            $('#foo').fadeIn("slow");
        });
    });

});
</script>
</head>
<body>
    <div id="container">
        <form id="myform">
            <p> blah blah blah blah blah </p>
            <input id="submit" value="send" type="submit"/>
        </form>
    </div>
</body>
</html>
person elclanrs    schedule 06.03.2012
comment
и причина, по которой он работает в скрипке, - это настройка слева для загрузки - person charlietfl; 06.03.2012
comment
@John Smith правильно ли вы включили библиотеку jQuery? - person elclanrs; 06.03.2012
comment
Я думал, что правильно включил его в строку 5 ‹script src=jquery-latest.js›‹/script›. Как дублировать функциональность загрузки jsfiddle? - person John Smith; 06.03.2012
comment
В этом примере показана функция загрузки, также обозначенная как $(document).ready(function() {... или в этом ответе сокращенная версия $(function () {.... - person shanabus; 06.03.2012
comment
изменив мой код на этот: ‹script type='text/javascript' src='code.jquery.com/jquery-1.5.js'›‹/script› ‹script type=text/javascript› $(function () { $('#submit').click(function () { $('#myfrom').fadeOut(slow, function () { var dot = $(‹div id='foo'›Доброе утро, мистер Патти‹br/›‹br/›Спасибо.‹/div›). hide(); $(this).replaceWith(dot); $('#foo').fadeIn(slow); }); }); }); ‹/скрипт› - person John Smith; 06.03.2012
comment
@elclanrs, пожалуйста, укажите, где я нахожусь, а) - person John Smith; 06.03.2012
comment
Вам не хватает ) в конце ...Thank you.</div>") ‹-- Вот! Но в вашей скрипке все в порядке. См. редактирование. - person elclanrs; 06.03.2012
comment
В вашем jsfiddle это работает, потому что вы привязываете свое событие отправки click, но эта кнопка не находится в теге <form>. Если локально вы используете тег формы, вы получите другую функциональность, поскольку отправка формы может иметь приоритет над событием нажатия кнопки. - person shanabus; 06.03.2012
comment
@шанабус, вот оно! Как только я переместил кнопку отправки за пределы тега ‹form›‹/form›, функция Jquery сработала и выполнилась правильно. Спасибо! - person John Smith; 06.03.2012
comment
@JohnSmith, круто, я рад, что это сработало. Я обновил свой ответ, включив в него это решение на тот случай, если вы захотите отметить мой ответ как решение. - person shanabus; 06.03.2012

arrow_upward
0
arrow_downward

Я вижу две проблемы с кодом, который вы разместили, который может помочь.

  • Начните свой документ, объявив тип документа - <!DOCTYPE html>

или, если вы используете спецификации HTML 4, по крайней мере, укажите тип скрипта:

  • Объявите тип javascript в вашей ссылке jquery - type="text/javascript"

ОБНОВЛЕНИЕ — на основе последних комментариев.

В вашем jsfiddle это работает, потому что вы привязываете событие отправки клика, но эта кнопка не находится в теге <form>. Если локально вы используете тег формы, вы получите другую функциональность, поскольку отправка формы может иметь приоритет над событием нажатия кнопки.

Надеюсь это поможет!

person shanabus    schedule 06.03.2012
comment
Несмотря на хорошую практику, я сомневаюсь, что любой из них создает проблему. - person Phil; 06.03.2012
comment
Если вы объявляете тип документа HTML5, вам не нужен type="text/javascript", он уже подразумевается... - person elclanrs; 06.03.2012
comment
Хотя я согласен с тем, что ни один из них не может решить проблему напрямую, вы ошибаетесь в отношении № 2 в соответствии со спецификацией: этот атрибут указывает язык сценариев содержимого элемента и переопределяет язык сценариев по умолчанию. Язык сценариев указывается как тип содержимого (например, текст/javascript). Авторы должны предоставить значение для этого атрибута. Для этого атрибута нет значения по умолчанию. -- w3.org/TR/html4/interact/scripts.html - person shanabus; 06.03.2012
comment
@shanabus это верно для html4, но ваш шаг 1 объявляет тип документа html5, где text-javascript действительно является значением по умолчанию. - person elclanrs; 06.03.2012
comment
Спасибо за отзыв, я обновил ответ, даже ОП уже сказал, что это не решило проблему. - person shanabus; 06.03.2012

arrow_upward
0
arrow_downward

Во всех таких сомнениях всегда нужно проверять источник http://jsfiddle.net/draft/, это последняя скрипка отображается нажатием [Run]. Проверьте источник и сравните его с вашим файлом.

person zalun    schedule 07.03.2012