可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm new to jQuery and have been scratching my head all day trying to determine why this script runs in jsFiddle but not on my computer. I do not have a server setup, I am merely launching the html in my browser from the desktop.

The code works fine here: http://jsfiddle.net/9Dubr/164/. However when I create the following html file:

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

I get no results when I click the submit button. Please help, I've spent 6 hours on this.

Thanks,

回答1:

You have to execute the code on DOM ready. Wrap your code in $(function(){ }); Also, you're missing a ).

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

回答2:

I see two problems with the code you posted that might help.

Start your document by declaring the doctype - <!DOCTYPE html>

or if using HTML 4 specs, at least specify the script type:

Declare the javascript type in your jquery reference - type="text/javascript"

UPDATE - based on recent comments

In your jsfiddle, it works because you are binding your submit click event but that button is not in a <form> tag. If locally you are using a form tag, you will get different functionality as the form submit may get priority over the button click event.

Hope this helps!

回答3:

In all such doubts it is always to check the source of http://jsfiddle.net/draft/ this is the last fiddle rendered with hitting [Run]. Check the source and compare it with your file.