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

Add more button not working on my admin panel

本文关键字：不起作用 按钮 添加 我的 管理      更新时间：2023-09-26

此代码有效，但通过单击按钮，页面会自动重新加载。因此，新的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>元素内。这可以解释为什么您的页面在单击按钮后重新加载。

使用代码的示例，其中按钮放置在窗体内。如果按钮放置在窗体外部，则不会发生这种情况 - 示例

解决方案：

  1. 您可以向按钮添加 type=button 属性（如果未指定属性，则默认为 type=submit）：

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

    演示 1

    type元素<Button>的属性。可能的值为：

      提交
    • ：该按钮将表单数据提交到服务器。如果未指定属性，或者属性动态更改为空值或无效值，则这是默认值。
    • 重置：该按钮将所有控件重置为其初始值。
    • 按钮：按钮没有默认行为。它可以具有与元素的事件关联的客户端脚本，这些脚本在事件发生时触发。

    参考

  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>

    演示 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>

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

小提琴

相关文章：