Question

我是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个小时。

谢谢，

Answer 1

您必须在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>

Answer 2

我发现您发布的代码可能会有两个问题。

通过声明doctype - <!DOCTYPE html>

或者如果使用HTML 4规范，至少要指定脚本类型：

在jquery引用中声明javascript类型 - type="text/javascript"

更新 - 基于最近的评论

在你的jsfiddle中，它有效，因为你绑定了你的提交点击事件，但该按钮不在<form>标签中。如果您在本地使用表单标记，则会获得不同的功能，因为表单提交可能优先于按钮单击事件。

希望这有帮助！

Answer 3

在所有这些疑惑中，总是检查http://jsfiddle.net/draft/的来源，这是通过点击[运行]呈现的最后一个小提琴。检查来源并将其与您的文件进行比较。

jQuery在jsFiddle中工作，但不在我的计算机上

3 个答案: