在jquery中创建后激活删除按钮

Question

我一直在尝试激活使用jQuery 创建的删除按钮

我尝试过将代码移入和移出$(document).text();
我尝试过在创建按钮上定位类
在控制台中我甚至没有收到错误。

我做错了什么？

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();
});

Answer 1

据我所见，您只需要将$(".delete"(.on("click"，…(移动到$("#saveButton"(.oon("clink"，…"(处理程序中(在您将新元素附加到#inputData之后(，否则它将在页面加载时触发(当您的.delete按钮不存在时(。

$("#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();
});
});

建议：如果你不想在这种情况下迷失方向，你也可以在开始时添加按钮，用一个CSS类隐藏它们，然后只显示它们。