我正在尝试制作待办事项列表应用程序。我使用 append() 函数将列表元素附加到我的任务列表
HTML
<!DOCTYPE HTML>
<html>
<title>ToDo</title>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<h2>TO DO LIST</h2>
</head>
<form name = "taskForm">
Task: <input type = "text" name = "task" >
<input type = "submit" id = "submit" value = "ADD">
</form>
<ul class = "list">
<li class = "item"></li>
</ul>
</html>
脚本
$(document).ready(function(){
$('input#submit').click(function(){
var newTask = $('input[name=task]').val();
$('.list').append('<li class = "item"' + newTask + '</li>');
});
});
当我单击“提交”按钮时，我看到新项目在屏幕上闪烁一秒钟，然后自行消失。
为什么我会看到这种行为？
最佳答案
这是因为您正在提交表单。 提交表单后，页面自动开始重定向。
要保留该行为，返回 false 以阻止提交表单
$(document).ready(function(){
$('input#submit').click(function(){
var newTask = $('input[name=task]').val();
$('.list').append('<li class = "item"' + newTask + '</li>');
return false;
});
});
请注意，这只是为了让您可以见证更改的持续存在。但是，根据您的需要，如果您希望提交表单，但保留附加的更改，则可能需要重新安排流程。这可以通过 $.ajax() 来完成提交。
关于javascript - 通过 jquery 添加添加的元素不会保留在屏幕上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31177741/