jQuery работает в jsFiddle, но не на моем компьютере - PullRequest
Новая
       7

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

1 голос
/ 06 марта 2012

Я новичок в 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 часов.

Спасибо

Ответы [ 3 ]

6 голосов
/ 06 марта 2012

Вы должны выполнить код на 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");
        });
    });

});

EDIT: 

<!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>
0 голосов
/ 07 марта 2012

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

0 голосов
/ 06 марта 2012

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

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

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

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

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

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

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

...