此代码有效,但通过单击按钮,页面会自动重新加载。因此,新的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>
此代码有效,但通过单击按钮,页面会自动重新加载(...
从上面可以看出,我怀疑<button>
被放置在<form>
元素内。这可以解释为什么您的页面在单击按钮后重新加载。
使用代码的示例,其中按钮放置在窗体内。如果按钮放置在窗体外部,则不会发生这种情况 - 示例
解决方案:
-
您可以向按钮添加
type=button
属性(如果未指定属性,则默认为type=submit
):<button type="button" onclick="newJacky()">Add New</button>
演示 1
type
元素<Button>
的属性。可能的值为:- 提交
- :该按钮将表单数据提交到服务器。如果未指定属性,或者属性动态更改为空值或无效值,则这是默认值。
- 重置:该按钮将所有控件重置为其初始值。
- 按钮:按钮没有默认行为。它可以具有与元素的事件关联的客户端脚本,这些脚本在事件发生时触发。
参考
-
阻止使用
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>
演示 2
你从使用 jquery 的页面中得到的东西没有被指定为元素类或div。如下所示:
$("apn").append(new1);
这应该$(".apn").append(new1);
你获得具有类 apn 的元素的位置,或者$("#apn").append(new1);
你获得具有div apn 的元素的位置。
试试看
如果您使用的是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>
只需确保将类添加到按钮即可。
小提琴