为什么空()不工作在搜索栏中的输入？

Question

单击inviteButton时，输入搜索栏应该清除，但它不适用于我当前的代码。

我的目标不对吗？

​

	$("#inviteButton").click(function(){
		var userName = $("#searchUser").val();
		if (userName.trim() != "") {
 			if (userName == myUserName) {
				$("#connectToBox").append("You can't invite yourself");
				$("#searchUser").empty(); // Doesn't work
			} else {
				socket.emit("checkUserConnect", userName, function(data){
 				if (data.result === undefined) {
 					console.log("No name");
 					$("#connectToBox").append("User does not exist");
 					$("#searchUser").empty(); // Doesn't work
 				} else {
 					console.log("name exists");
 					$("#searchUser").empty(); // Doesn't work
 					$("#connectToBox").append("Invite send");
 					UserID = data.result.id;
 					socket.emit("connectToUser", myUserName, UserID, currentConversation);
 				}
 				});
			}
		}
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="connectToBox">
				<label for="search-2">Type in username</label>
				<input type="search" name="search-2" id="searchUser" value="">
				<a href="#" id="inviteButton" data-role="button" data-inline="true">Connect</a>
			</div>

​

Answer 1

要清空输入字段，通常需要使用：

$('#searchUser').val('')

空用于清除元素(如div或p标记)中的子节点，但不用于输入。

原因是输入中的文本不表示为元素的子节点，而是存储在输入标记的html属性上。因此，.empty()不用于清除值。

Answer 2

可以清除输入字段。

$('#searchUser').val('');

Answer 3

$('#searchUser').val('');

根据您的应用程序，这将很好地工作。

空()方法从所选元素中移除所有子节点和内容。Src: W3Schools

根据您的要求，您需要重置输入字段的值，因为我们有val()函数。您可以分配一个空字符串，它将很好地工作。在这里使用empty()是行不通的。

看看这些例子-

• 空()正常工作-

​

function emptyOperation(){
    $("div").empty();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" id="input-field" value="Random string">
</div>
<button onclick="emptyOperation()">Check</button>

​

• 按照你的代码，空()不起作用-

​

function emptyOperation(){
    $("#input-field").empty();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" id="input-field" value="Random string">
</div>
<button onclick="emptyOperation()">Check</button>

​

• 解决你的问题-

​

function emptyOperation(){
    $("#input-field").val('');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" id="input-field" value="Random string">
</div>
<button onclick="emptyOperation()">Check</button>

​