Newly added button doesn't activate onclick function

Question

So I have two different buttons:

<input type='button' class='EditData btn btn-warning' value='Edit' name="{{id}}">

<input type='button' class='AddNew btn btn-success' value='Add Allocation' id="{{id}}">

This is my JQuery

$(function () {
    $('.AddNew').click(function(){
        console.log(this.name);
    });
    $('.EditData').click(function() {
         var y = document.getElementById("location_"+this.name);
         y.innerHTML = '<input type="button" class="AddNew btn btn-success" value="Add Allocation" id="'+this.name+'">'
    });
});

AddNew just prints something to the console. EditData replaces the EditData button with an AddNew Button.

AddNew works successfully. EditData successfully replaces itself with an AddNew button, however this button doesn't not work as intended and doesn't print anything on console when clicked.

score 2 · Accepted Answer · answered Nov 27 '19 at 14:41

2

You can try to use something like this :

$("body").on("click", ".AddNew", function(){
   console.log("test");
});

answered Nov 27 '19 at 14:41

Armedin Kuka

665
4
10

You could also use the jquery delegate method https://api.jquery.com/delegate/ – Lukas Gund Nov 27 '19 at 15:03
Awesome, this works for just `console.log("test")`. What if I wanted `console.log(this.name)`? – Benjamin Ju Nov 27 '19 at 15:13
@BenjaminJu It should still work, no? Usually in this case `this` would refer to `AddNew`. I might be wrong. – Armedin Kuka Nov 27 '19 at 15:27
@LukasGund no, .delegate() was deprecated ages ago in favor of .on() – j08691 Nov 27 '19 at 16:05
@ArmedinKuka No, it doesn't work. $(this) has a bunch of information but $(this).data is undefined and I haven't found a way to access either this.name or this.id – Benjamin Ju Nov 27 '19 at 18:10
Don't use `$(this).name`. Just use `this.name` or `this.id`. It works for me. – Armedin Kuka Nov 27 '19 at 18:14
Awesome, thanks :) – Benjamin Ju Nov 27 '19 at 18:21
My pleasure =)) – Armedin Kuka Nov 27 '19 at 18:26

Newly added button doesn't activate onclick function

1 Answers1