为什么这个jquery函数没有被调用
为什么这个jquery函数没有被调用
提问于 2013-09-11 15:12:00
我编写了非常简单的代码，下面是html代码：
<form name="signInForm">
<section id="signInSection">
<input class="large" type="text" placeholder="username" />
<br>
<input class="large" type="password" placeholder="password">
<br>
<button id="signinbtn" class="small">Sign In</button>
<br>
<label><input type="checkbox" />Remember me.</label>
<a href="#">Reset Password</a>
<img src="../images/cancel.jpg" alt="Cancel Sign In">
</section>
</form>下面是jQuery：
$('#signinbtn').on('click', function () {
$('#signInSection').fadeOut(200);
$('#signedInSection').fadeIn(200);
$('.signUp').fadeOut(1);
$('.signIn').closest('header').find('input').fadeIn(200);
$('#memberToolBarSection').fadeIn(1500);
$('#contents').fadeIn(1500);
}); 无论我在上面提到的单击处理程序中写什么，它都不起作用。虽然我通过发出警报来测试处理程序正在被调用。
谁能告诉我为什么它没有调用所有的fadeIn和fadeOut函数调用？
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-09-11 15:15:41
试试这个..。
$('#signinbtn').on('click', function (e) {
e.preventDefault();
$('#signInSection').fadeOut(200);
$('#signedInSection').fadeIn(200);
$('.signUp').fadeOut(1);
$('.signIn').closest('header').find('input').fadeIn(200);
$('#memberToolBarSection').fadeIn(1500);
$('#contents').fadeIn(1500);
}); 看起来表单正在提交，在本例中，表单只是重新加载页面。
将e参数添加到事件处理程序并添加e.preventDefault()将停止表单提交。
下面是一个有用的例子
Stack Overflow用户
发布于 2013-09-11 15:20:11
不是因为表单被提交了所以你被重定向了吗？如果是这样，请将处理程序更改为：
$('#signinbtn').on('click', function (e) {
e.preventDefault();
$('#signInSection').fadeOut(200);
$('#signedInSection').fadeIn(200);
$('.signUp').fadeOut(1);
$('.signIn').closest('header').find('input').fadeIn(200);
$('#memberToolBarSection').fadeIn(1500);
$('#contents').fadeIn(1500);
}); 关键线是e.preventDefault()；
Stack Overflow用户
发布于 2013-09-11 15:30:14
工作演示
尝尝这个
e.preventDefault();阻止它在动画之后提交表单，$("#signInForm").submit();将提交signInForm是表单id的表单
html
<form name="signInForm" id="signInForm">
<section id="signInSection">
<input class="large" type="text" placeholder="username"/><br>
<input class="large" type="password" placeholder="password"><br>
<button id="signinbtn" class="small">Sign In</button><br>
<label><input type="checkbox"/>Remember me.</label>
<a href="#">Reset Password</a>
<img src="../images/cancel.jpg" alt="Cancel Sign In">
</section>
</form>代码
$('#signinbtn').on('click', function (e) {
e.preventDefault();
$('#signInSection').fadeOut(200);
$('#signedInSection').fadeIn(200);
$('.signUp').fadeOut(1);
$('.signIn').closest('header').find('input').fadeIn(200);
$('#memberToolBarSection').fadeIn(1500);
$('#contents').fadeIn(1500);
$("#signInForm").submit();
}); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18744970
复制相关文章
相似问题
腾讯云开发者
