javascript - 由于错误，动态 jQuery 输入刷新页面

Question

我正在制作这个输入表单，用户可以通过它添加团队成员的姓名。我有四组输入文本字段。最初，我让其中一个可见，并使其他三个具有 hidden display。通过 javascript，我希望用户通过按下添加成员按钮来查看一组新的这些输入。这在我的本地主机上完美运行。但是，当我部署它时，只要我按下添加按钮，页面就会自行重新加载/刷新。在控制台中，它给出了这个错误内容安全策略指令“script-src”的源列表包含无效源:“strict-dynamic”。它将被忽略。

function add(){
    if($('#total_chq').val() < 4){
        var index = parseInt($('#total_chq').val()) + 1;
        $('#member_' + index).show();
        $('#total_chq').val(index);
    }
}
function remove(){
    var last_no = $('#total_chq').val();
    if(last_no > 1){
        $('#member_' + last_no).hide();
        $('#total_chq').val(last_no - 1);
    }
}

<div id="member_container">
    <!-- first guy -->
    <div class="form-field">
        <div class="form-group">
            <label for="fname">First Name</label> <input type="text"
                name="firstname1" class="form-control">
        </div>
        <div class="form-group">
            <label for="lname">Last Name</label> <input type="text"
                name="lastname1" class="form-control">
        </div>
    </div>
    <!-- second guy -->
    <div class="form-field" style="display: none;" id="member_2">
        <div class="form-group">
            <label for="fname">First Name</label> <input type="text"
                name="firstname1" class="form-control">
        </div>
        <div class="form-group">
            <label for="lname">Last Name</label> <input type="text"
                name="lastname1" class="form-control">
        </div>
    </div>
    <!-- third guy -->
    <div class="form-field" style="display: none" id="member_3">
        <div class="form-group">
            <label for="fname">First Name</label> <input type="text"
                name="firstname1" class="form-control">
        </div>
        <div class="form-group">
            <label for="lname">Last Name</label> <input type="text"
                name="lastname1" class="form-control">
        </div>
    </div>
    <!-- fourth guy -->
    <div class="form-field" style="display: none;" id="member_4">
        <div class="form-group">
            <label for="fname">First Name</label> <input type="text"
                name="firstname1" class="form-control">
        </div>
        <div class="form-group">
            <label for="lname">Last Name</label> <input type="text"
                name="lastname1" class="form-control">
        </div>
    </div>
</div>
<input type="hidden" value="1" id="total_chq">
<button class="btn btn-outline-none" onclick="add()">
    <i class="fas fa-plus"></i> Add Member
</button>
<button class="btn btn-outline-none" onclick="remove()">
    <i class="fas fa-times"></i> Remove Member
</button>

Answer 1

有几件事可能会有所帮助。首先确保使用 type 属性并确保将其设置为 button。作为w3schools建议:

Always specify the type attribute for the element. Different browsers may use different default types for the element.

如果这不起作用，请在 add 函数中使用 event.preventDefault()。首先将事件添加到内联部分:

<button onclick="add(event);" type="button">

然后调整add函数的前两行，像这样:

function add(event){
    event.preventDefault();