1

我是 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个小时在这上面。

谢谢，

4

3 回答 3

6

您必须在准备好的 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>
于 2012-03-06T02:21:46.570 回答
0

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

于 2012-03-07T08:40:52.857 回答
0

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

  • 通过声明 doctype 开始您的文档 -<!DOCTYPE html>

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

  • 在您的 jquery 参考中声明 javascript 类型 -type="text/javascript"

更新- 基于最近的评论

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

希望这可以帮助！

于 2012-03-06T02:28:27.240 回答