如何在 jquery 中注册对 div class 的每个实例的点击？

Question

What I'm trying to do is extremely simple. When I click on any instance of a class, create a new element of that class. The problem I'm running into is even though the click of the first instance is registered, and a new element is created. Clicking the newly created element with that class name does not create another element. I have to always click the first element in order for the script to work.

#html

<div class="modal-body">
  <div class="form-group" id="images_upload">
    <input type="file" name="file" class="file">
  </div>
  <div class="form-group">
    <input type="text" name="text" class="text" placeholder="type in a description">
  </div>
</div>


#js

$(".file").click(function () {
  var image = document.getElementById("images_upload");
  var newInput = document.createElement("input");
  
  newInput.type = "file";
  newInput.name = "file";
  $(newInput).addClass("file");
  image.appendChild(newInput);
  $();
});

see my codepen

https://codepen.io/benjermann/pen/vYgyapb?editors=1111

Answer 1

This is because the element was added after the click function was bound.

Change it to the following and it should work.

 $(document).on("click", ".file", function() { var image = document.getElementById("images_upload"); var newInput = document.createElement("input"); newInput.type = "file"; newInput.name = "file"; $(newInput).addClass("file"); image.appendChild(newInput); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <div class="modal-body"> <div class="form-group" id="images_upload"> <input type="file" name="file" class="file"> </div> <div class="form-group"> <input type="text" name="text" class="text" placeholder="type in a description"> </div> </div>