Question

我尝试制作一个简单的jQuery脚本，一旦按下提交按钮就删除/隐藏表单。

这是HTML和jQuery：

$(document).ready(function(){
	$("input").click(function(){
		$("#form1").hide();
	});
});

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="main.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<title></title>
</head>
<body>

	<form action="/database.php" method="POST" id="form1">
		<div class="input">
			<p>Enter player names, separated by commas:</p>
			<input type="text" name="input_players">
		</div>

		<div class="input">
			<p>Enter game name:</p>
			<input type="text" name="input_game">
		</div>

		<div class="submit">
			<input type="submit" name="submit" value="Submit" id="submit">
		</div>
	</form>

</body>
</html>

Answer 1

你有这个脚本使用jQuery的地方，但你的脚本是在jQuery之前加载的：

any

您需要切换顺序，以便首先加载jquery，并在以后加载时在脚本中使用。

<script type="text/javascript" src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

$（“input”）表示“输入类型的所有元素”。因此，当按下任何形式的元素时，它就会被隐藏。要实现您的目标，请将其更改为：

EXTRA_OUTPUT

Answer 3

放置

<script type="text/javascript" src="main.js"></script>

在正文的末尾，以确保jquery（由此脚本使用）已加载。或者更好的是，在$(document ).ready()事件被触发时使用回调执行它。

现在，您在单击时隐藏整个表单，因为您拦截了已触发的单击事件。选择器选择所有输入项。你有3个。

转入

$("#submit").click(function(){
    $("#form1").hide();
});

为什么这个jQuery脚本不起作用？

3 个答案: