当点击事件时，元素被添加并立即消失

Question

<!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 错误。 是什么原因？

Answer 1

因为默认类型按钮是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>

Answer 2

您正在提交表单并重新加载页面。 按钮元素的默认类型是提交。 只需将其更改为按钮：

<button id="more" type="button">add</button>

 $('#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> <form action=""> <input type="text" id="more-item" placeholder="addSomething" required autocomplete="off"> <button type="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>

Answer 3

添加阻止默认值。 该按钮正在提交表单并重新加载页面。

https://jsfiddle.net/35oabq20/

$('#more').on('click', function(e) {
e.preventDefault();

const item = $('#more-item').val();
  if (item !== '') {
    $('#items').append('<li class="item">' + String(item) + '</li>');
  } 
});