javascript - 无法删除最后一个前置对象

Question

我正在建立一个待办事项列表。这些任务是生成必要的 HTML 代码并将它们自身添加到 div 容器中的对象。字符串 listItemCode 包含列表项的所有必要代码，包括创建 div 作为每个元素中的删除按钮的代码。

正如您在 this JSFiddle 中看到的那样一切正常，只有列表中最上面的元素(说“放松”的那个)在点击删除按钮时不会自行删除。

如果您通过输入和提交按钮添加一个新的列表项，最后一个 IT 将变得不可移除，但第二最上面的元素将变为可移除。

我正在努力寻找错误。

// Object Array in which to store all the items
var tasks = [];

// Make list sortable
$("#mainlist").sortable();

// Task Constructor
var Task = function (title, description) {
    this.title = title;
    this.description = description;
    var listItemCode = "<div class='listItem'>" + "<input class='title' name='title' onClick='this.select();' placeholder='Title' value='" + title + "'><br>" + "<input class='description' name='description' onClick='this.select();' placeholder='Description' value='" + description + "'>" + "<div class='date'>" + date() + "</div>" + "<div class='removeButton'>X</div>" + "</div>";

    $(".removeButton").click(function() {
        listItemCode = "";
        $(this).parent(".listItem").fadeTo(200, 0).slideUp('fast', function() { $(this).remove(); }); 
    });

    // Push to Object Array containing all tasks
    tasks.push(this);
    // Display in Browser
    $("#mainlist").prepend(listItemCode);
};

// Add Dummy Tasks for Designing
addDummyTasks(true);

// New Task added by User
$("input[name=submit]").click(function () {
    var newTask = new Task($("input[name=title]").val(),
                           $("input[name=description]").val());
});

// Get, formats and returns the current date
function date() {
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();
    var hour = today.getHours();
    var minute = today.getMinutes();
    //var date = "Created on " + dd + "." + mm + "." + yyyy + " at " + hour + ":" + minute;
    var currentDateTime = dd + "." + mm + "." + yyyy + " at " + hour + ":" + minute;
    return currentDateTime;
}

// Dummy Tasks for Designing
function addDummyTasks(x) {
    if (x === true) {
        var task1 = new Task("Milk the cow", "You know she wants it.");
        var task2 = new Task("Get funky", "Boogie on down to the club.");
        var task3 = new Task("Freakify", "Get your freak on.");
        var task4 = new Task("Relax", "Time to get jiggy with it.");
    }
}

Answer 1

改为使用委托(delegate)事件处理程序:

$(document).on('click', ".removeButton", function() {

JSFiddle: http://jsfiddle.net/TrueBlueAussie/kqw65kpw/8/

这样它会在事件时间检查选择器，因此添加元素的时间并不重要。

你只需要注册一次，所以把它移到了你的函数之外。