javascript - 如何防止引导模式在执行 javascript 时关闭

Question

我正在使用引导模式中的用户输入数量生成文本框。但是，当我单击按钮并生成文本框时，模式会自动关闭并且网页正在重新加载。如何预防呢？我试图在模式上使用 data-backdrop="static"data-keyboard="false"但不起作用。代码如下:

<div class="form-group">
 <label class="control-label col-sm-2">Answer options :</label>
 <div class="col-sm-4" style="margin-right: -120px;">
   <input type="number" class="form-control" id="count_option" placeholder="Enter number of options" >
 </div>
 <div class="col-sm-2" >
   <button style="margin-left: 7em;" onclick="Generate(count_option.value)">Generate</button>
 </div>
</div>

<div id="options"></div>

Javascript代码:

<script type="text/javascript">
  function Generate(nums){
    var str = "";
    for(var index = 1; index <= nums; index++ ){
      str += '<div class="form-group"><label class="control-label col-sm-2"></label><div class="col-sm-2" style="margin-right: -120px;"><input type="radio" name="correct" value="" onclick="getTextValue('+ index +')" id="rd' + index +'"  style="display: inline; position: absolute; margin-top: 10px;"></div><div class="col-sm-8" ><input type="text" class="form-control" id="txt' + index +'" name="ans[]" placeholder="Answer"></div></div>';
    }
    document.getElementById("options").innerHTML = str;
  }
</script>

请帮助我。谢谢。

Answer 1

由于它是表单，因此其下的任何按钮默认情况下都会表现为提交按钮和onClick，它将提交表单

function stopFormSubmission(){
  let btn = document.querySelector('#yourBtn')
  btn.addEventListener("click", function(event){
      event.preventDefault() // prevent form from submitting
      Generate(nums) // Call your function

  });
}

 function Generate(nums){ // Your function
    var str = "";
    for(var index = 1; index <= nums; index++ ){
      str += '<div class="form-group"><label class="control-label col-sm-2"></label><div class="col-sm-2" style="margin-right: -120px;"><input type="radio" name="correct" value="" onclick="getTextValue('+ index +')" id="rd' + index +'"  style="display: inline; position: absolute; margin-top: 10px;"></div><div class="col-sm-8" ><input type="text" class="form-control" id="txt' + index +'" name="ans[]" placeholder="Answer"></div></div>';
    }
    document.getElementById("options").innerHTML = str;
  }

<form>

<button id="yourBtn" onClick="stopFormSubmission()" >click</button>

</form>

您只需要防止默认行为并停止表单提交