javascript - 添加更多按钮在我的管理面板上不起作用

Question

此代码可以正常工作，但是单击按钮后页面会自动重新加载。因此，新的 div 不会出现。我无法找出问题所在。你能帮我一下吗？

<script src="jquery.min.js"></script>
<script>
function newJacky() 
{
    var new1= "<p>one more added</p>";
    $(".apn").append(new1);     
}
</script>

<button onclick="newJacky()">Add New</button>
<div id="apn" class="apn"></div>

Answer 1

This code is working but by clicking on the button then the page reload automatically (...)

从上面的内容来看，我怀疑 <button>被放置在 <form> 内元素。这可以解释为什么您的页面在单击按钮后会重新加载。

安example使用您的代码并将按钮放置在表单内。如果按钮放置在表单之外，则不会发生这种情况 - example

解决方案:

1. 您可以添加 type=button按钮的属性(如果未指定该属性，则默认为 type=submit):

   <button type="button" onclick="newJacky()">Add New</button>
   

   DEMO 1

   type attribute of <Button> element. Possible values are:

   • submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
   • reset: The button resets all the controls to their initial values.
   • button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

   Reference

2. 使用 event.preventDefault() 阻止默认表单提交(将 "my-btn" 类添加到按钮):

   <script src="jquery.min.js"></script>
   <script>
   $(document).ready(function(){
       $(".my-btn").click(function(event){
           event.preventDefault();
           var new1= "<p>one more added</p>";
           $("#apn").append(new1);     
       });
   });
   </script>
   
   <button class="my-btn">Add New</button>
   <div id="apn" class="apn"></div>
   

   DEMO 2