Element created in jQuery not firing the listener

Question

I am little confused with this problem. I am trying to create a dynamic form, in which the used can make as many descriptions, checkboxes and number inputs and he wants. I am just creating a simple dynamic formular with jQuery, and so far I can create elements that they delete themselves (when the user click on remove the field) and I can add more elements in the form. Code as follows:

<!-- THE FIELD THAT I APPEND IS A COPY OF THIS ITEM -->
 <div class="container-field-form" id="description-field">
    <div class="container-field-form__img remove"> 
       <img  src="/static/svg/problem.svg" class="icon-to-do-form img-zoom-min " id="deleteButton">
    </div>
    <div class="container-field-form__field form-field"> 
        <textarea onchange="this.value = capitalizeFirstLetter(this.value)" class="form-control form-field" name="description" id="description" rows="3" placeholder="Enter the description"></textarea>
    </div>   
 </div>


<!-- FROM HERE I APPEND AND ONLY APPEARS ONE AT THE BEGGGINING -->
 <div class="container-field-form" id="description-field">
     <div class="container-field-form__img" id="add-description"> 
         <img  src="/static/svg/add-component.svg" class="icon-to-do-form img-zoom-min " id="deleteButton">
      </div>
      <div class="container-field-form__field form-field"> 
         <textarea onchange="this.value = capitalizeFirstLetter(this.value)" class="form-control form-field" name="description" id="description" rows="3" placeholder="Enter the description"></textarea>
      </div>   
 </div>

The problem that I have here, is that the items that I hardcoded in the HTML, they answer correctly (remove when they need to be removed or duplicate any camp), but with the new items that I add to the HTML, they do not answer to the listener (and it is a exact copy from the html, in the html hardcoded will work with any number, with the html inserted with jQuery no.

Here I give you the jQuery code, that just prepend a copy of the field of the HTML (working with no problem) and that removes the field when we click to remove (removes the current field and works but only in the hardcoded html)

 $("#add-description").click(function() {
        $("#description-fields").prepend('<div class="container-field-form" id="description-field"><div class="container-field-form__img remove"><img  src="/static/svg/problem.svg" class="icon-to-do-form img-zoom-min " id="deleteButton"></div><div class="container-field-form__field form-field"><textarea onchange="this.value = capitalizeFirstLetter(this.value)" class="form-control form-field" name="description" id="description" rows="3" placeholder="Enter the description"></textarea></div></div>')
    });

$(".remove").click(function() {
        $(this).parent().remove();
    });

Am I missing something? Thanks in advance

Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — matthias_h, Apr 07 '20 at 11:14
Events can only be bound to elements that are already in the page when the page is loaded initially. For elements that are added dynamically you need to delegate the event from a parent element that's already there, e.g. from document. Try $('document').on('click', '.remove', function(){ $(this).parent().remove(); });. More info here: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — matthias_h, Apr 07 '20 at 11:18
You're also reusing the same ids for each dynamic element, which will result in undefined behavior when trying to select the element by id — awarrier99, Apr 07 '20 at 11:20
Thanks for your feedback, now I understand the technical behaviour behind the scenes — kike, Apr 07 '20 at 11:31

score 1 · Accepted Answer · edited Apr 07 '20 at 12:35

1

you should use

$('html').on("click", "div.remove", function() {
   $(this).parent().remove();
});

edited Apr 07 '20 at 12:35

Amit Patel

15,609
18
68
106

answered Apr 07 '20 at 11:24

likonit

28
2

Welcome to Stack Overflow. The code in this answer was good, but the answer could be improved by explaining how it works and rather than saying "you should use" explaining why this technique should be used. Code only answers don't help other people learn as much as code combined with explanation. – Jason Aller Apr 07 '20 at 15:25
The answer above works because instead of calling the method with something created after the DOM is loaded, it is called from the father that contains all the children, The father is created in the DOM is loaded but the children not, so I needed to call the method from the father rather than from the children, that was my mistake – kike May 20 '20 at 13:09

Element created in jQuery not firing the listener

1 Answers1