<!DOCTYPE html>
<html>
<head>
<title>Question</title>
<meta charset="utf-8">
</head>
<body>
<form action="">
<input type="text" id="more-item" placeholder="addSomething" required autocomplete="off">
<button id="more">add</button>
</form>
<ul id="items">
<li class="item">work</li>
<li class="item">relax</li>
<li class="item">game</li>
</ul>
</body>
</html>
$('#more').on('click', function() {
const item = $('#more-item').val();
if (item !== '') {
$('#items').append('<li class="item">' + String(item) + '</li>');
}
});
https://jsfiddle.net/mj70Lzey/
当我添加 li 标签时，它被添加并立即从屏幕上消失，导致 404 错误。原因是什么？
最佳答案
因为默认类型按钮是submit ，当您单击表单中的按钮时，您的 action=""所以它将重新加载页面。
将按钮类型更改为按钮将解决您的问题 <button id="more" type="button">add</button>
JSFiddle
https://jsfiddle.net/viethien/08eq1pwv/1/
$('#more').on('click', function() {
const item = $('#more-item').val();
if (item !== '') {
$('#items').append('<li class="item">' + String(item) + '</li>');
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Question</title>
<meta charset="utf-8">
</head>
<body>
<form action="">
<input type="text" id="more-item" placeholder="addSomething" required autocomplete="off">
<button id="more" type="button">add</button>
</form>
<ul id="items">
<li class="item">work</li>
<li class="item">relax</li>
<li class="item">game</li>
</ul>
</body>
</html>关于javascript - 当点击事件时，元素被添加并立即消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61471801/