-5

enter code hereI have a div that includes three inputs on of this is a file input, I want when the user adds a file another copy of that div appear so that the user can add another file. I want to do it in jquery

I tried the append() event and I copied the HTML code for this div but when the copy appears and the user get to choose another file there is no other copy appears

<div class="master-div">
  <div class="divv">
    <input class="click" type="file"> 
   <input type="text">
   <input type="text">
 </div>
</div>

$('.click').on('click', function () {
        $('.master-div').append('
<div class="divv">
    <input class="click" type="file"> 
   <input type="text">
   <input type="text">
 </div>');


    });
Ibrahim Yousry
  • 59
  • 6
  • 3
    Show us the markup you have and any attempt you have already tried, in the question please. – Taplar Mar 26 '19 at 22:49
  • 3
    You need to share your code but it sounds like an issue with event handlers on dynamic elements. Look at “event delegation” in jQuery to ensure the event handlers applied to dynamically added elements such as these inputs. – Alexander Staroselsky Mar 26 '19 at 22:50
  • I added the code – Ibrahim Yousry Mar 26 '19 at 23:03
  • 1
    @AlexanderStaroselsky guessed it. Your `$('.click')` listener is only attached to elements that exist when it's called... future instances of the `.click` elements it creates are not attached to the event listener - hence clicking them does not call the function. Something like `$('.master-div').on('click', '.click', function() { /* CODE HERE */ });` would fix it; this seems to come up every day on this site. –  Mar 26 '19 at 23:05
  • `$('.divv').on('click', '.click', function () { ...` – Alexander Staroselsky Mar 26 '19 at 23:07
  • Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Taplar Mar 26 '19 at 23:08
  • 1
    Possible duplicate of [In jQuery, how to attach events to dynamic html elements?](https://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) – Alexander Staroselsky Mar 26 '19 at 23:09
  • It worked, thank you @AlexanderStaroselsky – Ibrahim Yousry Mar 26 '19 at 23:19
  • It worked, thank you @Taplar – Ibrahim Yousry Mar 26 '19 at 23:19
  • but is there is a code to copy the HTML just by calling the class instead of writing the HTML code in the JQuery code? – Ibrahim Yousry Mar 26 '19 at 23:21

1 Answers1

-1

Your issue is that the click handler is only attached to the .click elements that are on the page when the code is run. Attach your handler to .master-div and listen for a click on click:

$(".master-div").on("click", ".click", function() {
  $('.master-div').append('<div class="divv"><input class="click" type="file"><input type="text"><input type="text"></div>');
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="master-div">
  <div class="divv">
    <input class="click" type="file">
    <input type="text">
    <input type="text">
  </div>
</div>
Jack Bashford
  • 43,180
  • 11
  • 50
  • 79