jQuery动态添加输入框显示后消失问题求助

嘿，我一眼就看出问题所在啦！你点击的那个触发addfields()的按钮是type="submit"，它的默认行为是提交表单，导致页面直接刷新——这就是为什么输入框刚出现一秒就没了！下面给你几个具体的修复步骤：

1. 修改触发按钮的类型 #

把调用addfields()的按钮从type="submit"改成type="button"，这样就不会触发表单提交刷新页面了：

<button type="button" class="btn btn-primary" name="headingfieldbtn" id="headingfieldbtn" onclick="addfields()">Submit for Heading and Fields</button>

2. 给变量添加声明，避免全局污染 #

你的JS代码里的headings、headingsvalue这些变量都没声明，最好加上let或者var，养成良好的编码习惯：

function addfields(){
 let headings = document.querySelector('#heading-list');
 let headingsvalue = headings.value;
 let fields = document.querySelector('#fields-list');
 let fieldsvalue = fields.value;
 // 后面的循环代码不变
}

3. 完善下拉框的option值 #

你第二个下拉框（fields-list）的option只写了文本，没有value属性，这样fields.value可能无法正确获取数值，给它们补上value：

<select name="fields-list" id="fields-list">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

完整修改后的代码片段 #

HTML部分（关键修改处） #

<label>How many fields do you want?</label>
<select name="fields-list" id="fields-list">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<button type="button" class="btn btn-primary" name="headingfieldbtn" id="headingfieldbtn" onclick="addfields()">Submit for Heading and Fields</button>

JavaScript部分 #

<script>
function addfields(){
 let headings = document.querySelector('#heading-list');
 let headingsvalue = headings.value;
 let fields = document.querySelector('#fields-list');
 let fieldsvalue = fields.value;
 for (let i=1; i<=headingsvalue ; i++) {
 $('#dynamic_field').append('<input type="text" name="heading[]" placeholder="Heading" class="form-control mb-2"/>');
 }
 for (let j=1; j<=fieldsvalue; j++) {
 for (let k=1; k<=headingsvalue ; k++) {
 $('#dynamic_field').append('<input type="text" name="field[]" placeholder="Field" class="form-control mb-2"/>');
 }
 }
}
</script>

我还给输入框加了mb-2类，让它们之间有间距，看起来更美观~

这样修改之后，点击按钮添加输入框就不会消失啦，页面也不会刷新，完全符合你的需求！

内容的提问来源于stack exchange，提问作者Kabir Jhangiani