Question

当我点击按钮重新加载页面时，

正是问题，解决方案是使用preventDefault()但是作为＆＃39;没有正确执行输入控制，或者如果不满足模式则不会出现任何错误

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

＆＃13;

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

＆＃13;

错误使用<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>

Answer 2

删除src =＆＃34; jquery-1.11.3.min.js＆＃34;它应该工作。如果你必须添加jquery库给它一个单独的脚本元素。

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

Answer 3

脚本元素可以从其文本内容或加载由src属性指定的网址加载脚本。

您正在加载jQuery，但<script>的内容永远不会运行。

您需要为每个脚本单独<script>。

除了1：在submit元素上使用form事件通常比在提交按钮上使用click事件更好。

除了2之外：确保在将按钮的HTML添加到DOM后运行代码。否则$('#go')将不匹配任何元素。

Answer 4

尝试在点击事件功能结束时返回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>

按下按钮时避免重新加载页面

4 个答案: