jQuery - Adding behaviour to a button created dynamically when clicked other button

Question

I'm stuck on this. I'm doing a dynamic form in jQuery and I want to add a remove button which is dynamically created when I click on a Add new tasks.

So there is my JS script. First one is the Add new tasks button:-

$("#bttn-add").click(function(){        
        $("#bttn-add-function").before(
            '<div class="toadd panel panel-default panel-body">'+
                '<div class="form-group func">'+
                    '<label>Función a desarrollar <sup style="color:red">*</sup></label>'+
                    '<input class="form-control" type="text" placeholder="Función a desarrollar" maxlength="200" required>'+
                '</div>'+
                '<div class="form-group tarea">'+
                    '<label>Tarea principal en esta función <sup style="color:red">*</sup></label>'+
                    '<textarea class="form-control"  placeholder="Enumere las funciones de su puesto de trabajo comenzando por las más representativas, así como las tareas necesarias para el cumplimiento de las mismas" rows="3" required></textarea>'+
                '</div>'+
                '<div>'+
                    '<button class="button btn-danger" type="button"><span class="fa fa-minus"></span></button>'+
                '</div>'+
            '</div>'
        );
 });

And then, the snippet for adding a behavior to the Delete button which doesn't work:-

$("button .btn-danger").click(function(){
   console.log($(this).parent())
})

Note: it works with the "Add new Tasks" button but "Delete"

Use Event delegation: $(document).on('click', '.btn-danger', function(){ console.log($(this).parent()) }); — hallleron, Jul 24 '17 at 11:29
@hallleron that was quick and effective, thank you! I spent like an hour with this. — UnsignedFoo, Jul 24 '17 at 11:31
Check this one https://stackoverflow.com/questions/35808058/onclick-is-not-working/35808785#35808785 — M.Nabeel, Jul 24 '17 at 12:19

score 2 · Accepted Answer · answered Jul 24 '17 at 11:30

2

try this

$(document).on('click',"#bttn-add button .btn-danger",function(){
   console.log($(this).parent())
})

answered Jul 24 '17 at 11:30

Kundan Prasad

556
5
10

score 1 · Answer 2 · answered Jul 24 '17 at 11:34

$(document).ready(function(){
$("#bttn-add").on('click',function(){        
        $("#bttn-add").before(
            '<div class="toadd panel panel-default panel-body">'+
                '<div class="form-group func">'+
                    '<label>Función a desarrollar <sup style="color:red">*</sup></label>'+
                    '<input class="form-control" type="text" placeholder="Función a desarrollar" maxlength="200" required>'+
                '</div>'+
                '<div class="form-group tarea">'+
                    '<label>Tarea principal en esta función <sup style="color:red">*</sup></label>'+
                    '<textarea class="form-control"  placeholder="Enumere las funciones de su puesto de trabajo comenzando por las más representativas, así como las tareas necesarias para el cumplimiento de las mismas" rows="3" required></textarea>'+
                '</div>'+
                '<div>'+
                    '<button class="button btn-danger" type="button"><span class="fa fa-minus"></span>Delete</button>'+
                '</div>'+
            '</div>'
        );
 });
 
 $(document).on('click','.btn-danger',function(){
   console.log("lala")
}) 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bttn-add">add</div>

jQuery - Adding behaviour to a button created dynamically when clicked other button

2 Answers2