动态 jQuery 输入因错误而刷新页面答案

【问题标题】：Dynamic jQuery input refreshes the page because of error动态 jQuery 输入因错误而刷新页面
【发布时间】：2021-04-11 02:39:28
【问题描述】：

我正在制作这个输入表单，用户可以通过它添加团队成员的姓名。我有四组输入文本字段。最初，我让其中一个可见，并使其他三个具有hiddendisplays。通过 javascript，我希望用户通过按下添加成员按钮来查看一组新的输入。这在我的本地主机上完美运行。但是，当我部署它时，只要我按下添加按钮，页面就会重新加载/刷新。在控制台中，它给出了这个错误 The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.

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>

【问题讨论】：

你的函数 add() 是如何被调用的？我没有在你的 html 中看到它。无论如何看起来你需要在添加时调用 event.preventDeault，因为这看起来像是一个包装表单元素的正常提交行为。
@Klaassiek 嗨，抱歉，我刚刚添加了缺少的 HTML。
这不是错误。而提神可能与此无关。 stackoverflow.com/questions/65094328/…
@yochanansheinberger 谢谢你的建议！我检查了，但我如何防止它刷新？您是否认为这是因为另一个问题？
是的。顺便说一句，您在所有姓氏输入元素中都有错字type="texc"

标签： javascript html jquery browser preventdefault

【解决方案1】：

有几件事可能会有所帮助。首先确保使用type 属性并确保将其设置为button。正如w3schools 建议的那样：

始终指定元素的类型属性。不同的浏览器可能对元素使用不同的默认类型。

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

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

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

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

【讨论】：