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

此代码正常工作，但点击该按钮，页面会自动重新加载（...）

从上面可以看出，我怀疑<button>位于<form>元素内。这可以解释为什么在点击按钮后重新加载页面。

example使用您的代码，并在窗体内放置按钮。如果按钮位于表单外部，则不会发生这种情况 - example

<强>解决方案：

您可以在按钮中添加type=button属性（如果未指定属性，则默认为type=submit）：
```
<button type="button" onclick="newJacky()">Add New</button>
```
DEMO 1
type元素的
<Button>属性。可能的值有：
- 提交：该按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则这是默认值。
- 重置：该按钮会将所有控件重置为初始值。
- 按钮：该按钮没有默认行为。它可以具有与元素事件关联的客户端脚本，这些事件在事件发生时触发。
Reference

使用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

Answer 2

使用jquery从页面获取的内容未指定为元素类或div。如下所示：

$("apn").append(new1);

这应该是$(".apn").append(new1);，你要获得一个带有类apn的元素，或者$("#apn").append(new1);，你要获得一个带有div apn的元素。

试试

Answer 3

如果您使用的是jquery，我建议您使用它提供的点击功能：

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

<button class="addNewBtn">Add New</button>
<div id="apn" class="apn"></div>

只需确保将该类添加到按钮。

Fiddle

在我的管理面板上添加更多按钮无效

3 个答案: