[英]avoid reloading the page when you press the button
正是当我单击按钮重新加载页面时的问题，解决方案是使用preventDefault()但是在执行输入控制时未正确执行，或者如果不满意模式则不会出现任何错误
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $('#go').click(function(event) { //event.preventDefault(); var use = $('#Username').val(); var passwor = $('#Password').val(); alert("Hi); // Ajax request here }); </script>
<div class="container"> <div class="card"></div> <div class="card"> <h1 class="title">Login</h1> <form> <div class="input-container"> <input type="text" id="Username" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/> <label for="Username">Username</label> <div class="bar"></div> </div> <div class="input-container"> <input type="password" id="Password" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/> <label for="Password">Password</label> <div class="bar"></div> </div> <div class="button-container"> <button id="go" ><span>Login</span></button> </div> </form> </div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script> $(function(){ $('#go').click(function(event) { // event.preventDefault(); var use = $('#Username').val(); var passwor = $('#Password').val(); console.log(use, passwor); }); }); </script> <div class="container"> <div class="card"></div> <div class="card"> <h1 class="title">Login</h1> <form> <div class="input-container"> <input type="text" id="Username" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/> <label for="Username">Username</label> <div class="bar"></div> </div> <div class="input-container"> <input type="password" id="Password" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/> <label for="Password">Password</label> <div class="bar"></div> </div> <div class="button-container"> <button id="go" ><span>Login</span></button> </div> </form> </div> </div>
错误使用<script>标记，您需要使用src加载脚本内容，而不是同时加载两者。
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function() { // wait for DOM to load
$('#go').click(function(event) {
//event.preventDefault();
var use = $('#Username').val();
var passwor = $('#Password').val();
alert("Hi");
});
});
<script>
您可以使用 将event.preventDefault() （推荐）或 type="button"属性添加到#go按钮
<button id="go" type="button"><span>Login</span></button>
删除src =“ jquery-1.11.3.min.js”，它应该可以工作。 如果必须添加jquery库，请给它一个saperate scrip元素。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="card"></div>
<div class="card">
<h1 class="title">Login</h1>
<form>
<div class="input-container">
<input type="text" id="Username" />
<label for="Username">Username</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" />
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button id="go" ><span>Login</span></button>
</div>
</form>
</div>
</div>
<script>
$('#go').on('click',function(e){
var username=$("#Username").val();
var password=$('#Password').val();
e.preventDefault();
alert('Hi');
//write ajax code here
});
</script>
<!-- language: lang-html -->
</body>
</html>
听到的是plunker链接： - http://plnkr.co/edit/FmdXu6YixLjlaYerLHFa?p=preview
脚本元素可以从其文本内容或 src属性指定的URL（而不是两者）加载脚本。
您正在加载jQuery，但是<script>的内容永远不会运行。
每个<script>需要一个单独的<script> 。
撇开1：与在提交按钮上click事件相比，在form元素上使用submit事件通常要好得多。
撇开2：确保将按钮的HTML添加到DOM后，您的代码可以运行。 否则$('#go')将不匹配任何元素。
尝试在click事件函数的末尾返回false。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $('#go').click(function(event) { //event.preventDefault(); var use = $('#Username').val(); var passwor = $('#Password').val(); alert("Hi); // Ajax request here //Return false to prevent refresh return false; }); </script>
<div class="container"> <div class="card"></div> <div class="card"> <h1 class="title">Login</h1> <form> <div class="input-container"> <input type="text" id="Username" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/> <label for="Username">Username</label> <div class="bar"></div> </div> <div class="input-container"> <input type="password" id="Password" required="required" pattern=".{4,}" title="Devi inserire almeno 4 caratteri"/> <label for="Password">Password</label> <div class="bar"></div> </div> <div class="button-container"> <button id="go" ><span>Login</span></button> </div> </form> </div> </div>
当点击“后退”按钮时，你可以停止重新加载前一页吗？
[英]Can you stop a prior page from reloading when “back” button is clicked?
当您使用Jquery按下按钮时，我试图使页面滚动速度变慢吗？
[英]I am trying to make my page scroll slower when you press a button using Jquery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.