Event add div javascript

Navigation
1

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

Follow 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 that will add a line every time you click it. 

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

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

Thank you.

    
asked by anonymous 01.11.2017 / 13:29

2 answers

2

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

Extract the function and reuse 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);
})
    
01.11.2017 / 13:53
2

Andrew's answer is correct, but there is a way that requires less effort.

Just change the click function to the on function, 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 with only the image that exists at the time the code runs. The above code associates the event click with all a elements that are children of div class input , now and in the future .

This is the link to the on documentation. The relevant excerpt 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 events of descendants that are added later to the document (the page). By using on in an element that is guaranteed to be present at the time that handler is associated, you avoid having to associate the same event with each new element added .

    
01.11.2017 / 14:15
How to reference the goal property created with 'with TEdit.Create (Self)'? (Python) Sort lists without sort ()