Question

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

正如您在this JSFiddle中看到的一切正常，只有列表中最顶级的项目（一个说＆＃34;放松＆＃34;）在删除按钮时不会自行删除点击。

如果您通过输入和提交按钮添加新的列表项，则最后一个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

改为使用委托事件处理程序：

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

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

这样它会在事件时间检查选择器，因此添加项目无关紧要。

您只需要注册一次，所以将其移到您的功能之外。

Answer 2

这是因为当你创建一个新的任务$('.removeButton').click()时，DOM中还不存在。因此，create trigger ai_table_trigger for each row begin insert into temp_table(record_id,update_datetime)values(old.id,now()); end未运行，因为不存在任何元素。第一个创建的任务在创建第二个任务时获取其事件，在创建第三个任务时获取第二个任务，依此类推。

Answer 3

我注释了libfdk-aac函数，并在使用JSFiddle时将其移动到$(".removeButton").click(function() { ... });属性，并且能够使其工作。虽然不是我最喜欢的实现点击处理程序的方法，但这将确保它附加到列表中应用的每个现有DOM元素。

这是我的JSFiddle代码。

onclick

无法移除上一个前置对象

3 个答案: