javascript - 单击重置按钮后数据未附加到我们再次重新加载页面以附加数据

Question

$("#copyBtn").click(function() {
  var selected = $("#selectBox").val();
  $("#output").append(" Origin :" + selected);
});
$("#copyBtn").click(function() {
  var selected = $("#selectBox1").val();
  $("#output").append("\n Case : " + selected);
});
$("#copyBtn").click(function() {
  var selected = $("#selectBox2").val();
  $("#output").append("\n Customer  : " + selected);
});
$("#copyBtn").click(function() {
  var selected = $("#textbox").val();
  $("#output").append("\n Vendor : " + selected);
});
$("#copyBtn").click(function() {
  var selected = $("#textbox1").val();
  $("#output").append("\n Product : " + selected);
});

$(document).ready(function() {
  $('#btn').click(function() {
    /*Clear all input type="text" box*/
    $('#form input[type="text"]').val('');
    /*Clear textarea using id */
    $('#form #output').val('');
    $('#form #selectBox').val('Select');
    $('#form #selectBox1').val('Select');
    $('#form #selectBox2').val('Select');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" class="private-comments-form">
  <div class="col-md-8 formdiv">
    <div class="row">
      <div class="col-xs-6 form-group"><label for="sel1">Select Origin of Case</label>
        <select class="form-control" id="selectBox">
          <option>Select</option>
          <option>Customer</option>
          <option>Tech</option>
          <option>Tec</option>
          <option>Account</option>
          <option>Team</option>
        </select>
      </div>
      <div class="col-xs-6 form-group"> <label for="sel1">Select Case Requestor</label>
        <select class="form-control" id="selectBox1">
          <option>Select</option>
          <option>Vendor</option>
          <option>Contact</option>
          <option>Account</option>
        </select>
      </div>
      <div class="col-xs-6 form-group"> <label for="sel1">Customer Request</label>
        <select class="form-control" id="selectBox2">
          <option>Select</option>
          <option>Add</option>
          <option>Update</option>
          <option>Remove</option>
          <option>Troubleshoot</option>
        </select>
      </div>
      <div class="col-xs-6 form-group"> <label for="sel1">Vendor :</label> <input class="form-control" type="text" id="textbox" /></div>
      <div class="col-xs-6 form-group"> <label for="sel1">&nbsp;</label> <input class="form-control js-textareacopybtn" id="copyBtn" type="button" value="Get Content" /></div>
      <div class="col-xs-6 form-group"> <label for="sel1">Product :</label> <input class="form-control" type="text" id="textbox1" /></div>
      <div class="col-xs-12 form-group"> <label for="sel1">Copy Content :</label><textarea class="col-xs-12 js-copytextarea" id="output" name="textarea"></textarea></div>
      <div class="col-xs-12 form-group"> <input type="button" class="reset " id="btn" onclick="myFunction()" value="Reset" /></div>
    </div>
  </div>
</form>

点击reset按钮后，再次点击Get Content data is not appending 我正在附加附加数据和重置脚本的脚本 请检查代码

Answer 1

解释

您计划用于访问 DOM(输入、文本区域等)的任何 jQuery 代码。如果它们在 .ready 方法中执行会更好。

此方法的作用是等待页面的全部内容加载完毕。然后，您就可以毫无问题地访问所有 DOM。

接下来，对于#copyBtn，您只需要绑定(bind)一次点击事件。

$(document).ready(function() {

  $("#copyBtn").click(function() {
    var text = " Origin :" + $("#selectBox").val();
    text += "\n Case : " + $("#selectBox1").val();
    text += "\n Customer  : " + $("#selectBox2").val();
    text += "\n Vendor : " + $("#textbox").val();
    text += "\n Product : " +  $("#textbox1").val()
    $("#output").val(text);   
  });

  $('#btn').click(function() {
    /*Clear textarea using id */
    $('#output').val('');
    $('#form #selectBox').val('Select');
    $('#form #selectBox1').val('Select');
    $('#form #selectBox2').val('Select');
    /*Clear all input type="text" box*/
    $('#form input[type="text"]').val('');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" class="private-comments-form">
  <div class="col-md-8 formdiv">
    <div class="row">
      <div class="col-xs-6 form-group"><label for="sel1">Select Origin of Case</label>
        <select class="form-control" id="selectBox">
          <option>Select</option>
          <option>Customer</option>
          <option>Tech</option>
          <option>Tec</option>
          <option>Account</option>
          <option>Team</option>
        </select>
      </div>
      <div class="col-xs-6 form-group"> <label for="sel1">Select Case Requestor</label>
        <select class="form-control" id="selectBox1">
          <option>Select</option>
          <option>Vendor</option>
          <option>Contact</option>
          <option>Account</option>
        </select>
      </div>
      <div class="col-xs-6 form-group"> <label for="sel1">Customer Request</label>
        <select class="form-control" id="selectBox2">
          <option>Select</option>
          <option>Add</option>
          <option>Update</option>
          <option>Remove</option>
          <option>Troubleshoot</option>
        </select>
      </div>
      <div class="col-xs-6 form-group"> <label for="sel1">Vendor :</label> <input class="form-control" type="text" id="textbox" /></div>
      
      <div class="col-xs-6 form-group"> <label for="sel1">Product :</label> <input class="form-control" type="text" id="textbox1" /></div>
<div class="col-xs-6 form-group"> <label for="sel1">&nbsp;</label> 

<input class="form-control js-textareacopybtn" id="copyBtn" type="button" value="Get Content" /></div>      

      <div class="col-xs-12 form-group"> <label for="sel1">Copy Content :</label><textarea class="col-xs-12 js-copytextarea" id="output" name="textarea"></textarea></div>
      <div class="col-xs-12 form-group"> <input type="button" class="reset " id="btn" value="Reset" /></div>
    </div>
  </div>
</form>