Event add div javascript

Question

I have a code where there is a form and the user can choose the number of lines by clicking on buttons that are in front of the input, there is a '+' button to add a new input and '-' to remove the current input.

Follows the code:

 <div class="posicao-radioButton botoes">
   <div class="input">
     <input type="radio" disabled name="idade"><input type="text" 
      name="quest1"><a href=""><img class="img-add" title="Adicionar uma 
      linha" src="img/add.png"></a><a href=""><img class="img-remove" 
      title="Remover Linha" src="img/remove.png"></a>
  </div>
</div>

these buttons are connected with jquery events which will add a line every time + is clicked.

$(function(){
    $(".img-add").click(function(e){
       event.preventDefault();
        console.log("click");
        var parente = $(this).closest(".input");
        parente.clone().appendTo( ".botoes" );
    })
})

but this code is only partially working, since the event works only for the first button that is created with the page and not with others. Does anyone know what is missing to run the event on all buttons that are created?

Thank you.

Answer 1

How you add a new element (the .input) you must add the event of click in this new div.

Extracts the function and reuses it for the div’s that are added.

$(function(){
    let onClick = function(e){
       event.preventDefault();
        console.log("click");
        var parente = $(this).closest(".input");
        var cloneParente = parente.clone().click(onClick);
        cloneParente.appendTo( ".botoes" );
    };

    $(".img-add").click(onClick);
})

Answer 2

André’s answer is correct, but there is one form that requires less effort.

Just change the function click by function on, as follows:

$(function() {
    $("div.input").on("click", "a", function(e) { // eis o pulo do gato
        event.preventDefault();
        console.log("click");
        let parente = $(this).closest(".input");
        parente.clone().appendTo(".botoes");
    });
}

Explanation: Your current code associates an event only to the image that exists at the time the code is executed. Already the above code associates the event click to all elements a who are children of div class input, now and in the future.

This is the link to the on documentation. The relevant part is as follows::

Delegated Events have the Advantage that they can process Events from Descendant Elements that are Added to the Document at a later time. By picking an element that is Guaranteed to be present at the time the delegated Event Handler is Attached, you can use delegated Events to avoid the need to Frequently attach and remove Event handlers.

In Portuguese, my translation, with emphasis on the important parts:

Delegated events have the advantage of being able to process descendent elements (children) who are later added document (the page). Using on in an element that is guaranteed to be present at the time that the handler is associated, you avoid the need to associate the same event with each new element added.