activating a delete button after being created in jquery

Question

I've been trying to activate a delete button I created using jQuery

I have tried moving the code inside and out of the $(document).text();
I have tried targeting a class on the created button
I am not even getting an error from in my console.

What am I doing wrong?

var day = '';
var time = '';
var task = '';

$(document).text(function() {
  $("#saveButton").on("click", function() {
    //Save day, time & task to footer.
    day = $("#day").val();
    time = $("#time").val();
    task = $("#task").val();
    $("#inputData").append("<li>" + day +
      " | " + time + " | " + task +
      " | " + "<button class='btn btn-success edit'>Edit</button>" +
      " | " + "<button class='btn btn-danger delete'>Delete</button><br>" + "</li>");
  });
});
$(".delete").on("click", function() {
  day = $("#day").empty();
  time = $("#time").empty();
  task = $("#task").empty();
});

I am very confused with your attempted use of `text()` here. You appear to be trying to use it like a document ready. You are not returning a string value at the end, which the `text()` method would expect. Also your use of `****` in the code is a syntax error. — Taplar, Aug 01 '18 at 15:18
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Taplar, Aug 01 '18 at 15:36
From the duplicate (which has more info) : `$(document).on("click", "button.delete", function() { day = ...` — freedomn-m, Aug 01 '18 at 16:29

score 0 · Answer 1 · answered Aug 01 '18 at 15:25

From what I see, you just need to move the $(".delete").on("click", ...) inside the $("#saveButton").on("click", ...) handler (after you append the new elements to #inputData), otherwise it will fire at page load (when your .delete button does not yest exist).

$("#saveButton").on("click", function () {
    //Save day, time & task to footer.
    day = $("#day").val();
    time = $("#time").val();
    task = $("#task").val();
    // append the buttons to the dom...
    $("#inputData").append("<li>" + day +
        " | " + time + " | " + task +
        " | " + "<button class='btn btn-success edit'>Edit</button>"
        + " | " + "<button class='btn btn-danger delete'>Delete</button><br>" + "</li>");
    // ...then add the click handler to the new button
    $(".delete").on("click", function() {
       day =  $("#day").empty();
        time = $("#time").empty();
        task = $("#task").empty();
    });
});

Suggestion: if you don't want to gat lost with this scenario, you can also add your buttons in the beginning, with a CSS class that hides them, then just show them.

The issue with this approach is you are looking up elements with the delete class, globally. This will find the previously found elements that already have a binding on them, and create a duplicate binding. Either the logic should target specifically the one just created, or the logic should use a delegate binding instead. — Taplar, Aug 01 '18 at 15:36

activating a delete button after being created in jquery

1 Answers1