无意克隆

Question

仅在按此按钮时，该按钮才被克隆。过去几天，我一直在尝试将按钮绑定到单击功能，但是我不知道为什么它不起作用。

下面的代码片段：

html：

<input type="button" value="+" id="button+" onclick="clone1()"/>
<div id="container"></div>
<div class="cloneitem">
    <style>
    select:invalid { color: gray; }
    </style>
    <form>
    <select required>
    <option value="" disabled selected hidden>How much?</option>
    <option value="S">A little</option>
    <option value="M">A good bit</option>
    <option value="L">A lot</option>
    </select>
    of
<input type=text id="ansbox">
</form>
</div>

js：

 $(function clone1(){

    $('input').click(function(){
        $('.cloneitem:first').clone().appendTo('#container').find("input:text").val("")
        ;
    });

});

Answer 1

您在JS中附加事件处理程序时，不需要在HTML中添加onclick事件。只需在JS中添加ready事件即可。它应该工作。请在下面找到代码

$(function() {

  $('input').click(function() {
    $('.cloneitem:first').clone().appendTo('#container').find("input:text").val("");
  });

});

<input type="button" value="+" id="button+" />
<div id="container"></div>
<div class="cloneitem">
  <style>
    select:invalid {
      color: gray;
    }
  </style>
  <form>
    <select required>
      <option value="" disabled selected hidden>How much?</option>
      <option value="S">A little</option>
      <option value="M">A good bit</option>
      <option value="L">A lot</option>
    </select>
    of
    <input type=text id="ansbox">
  </form>
</div>