循环遍历数组时将 id 绑定到删除按钮

Question

我正在制作一个待办事项列表，其中任务被推送到一个数组中，然后通过在 for 循环中遍历所有任务来呈现该数组。

对于每个任务，我想绑定一个删除按钮，以便删除特定任务。与现在的代码一样，没有删除任何项目，因为返回了循环完成后的最后一个值。

我知道我需要某种封闭，但我不知道如何成功。

我的标记如下：

<div class="row">
        <div class="medium-8 medium-centered columns">
            <div class="todo-container">
                <h2>Todo-list</h2>
                <input type="text" id="todo-input" placeholder="Hit enter to add new" autofocus>

                <div class="all-posts">

                </div>
            </div>
    </div>

还有 Javascript + jQuery：

(function($, window, undefined) {

        var tasks = [],
        todoInput = $("#todo-input");


        todoInput.on('keypress', function(e) {
            if (e.keyCode == 13) {
                createTask();
            }
        });

        function createTask() {
            var input = todoInput.val();

            if (input.length !== 0) {
                tasks.push(input);
            }

            todoInput.val("");

            renderTasks();
        }

        function renderTasks() {
            var allPosts = $(".all-posts");
            allPosts.empty();

            for (var i = 0; i < tasks.length; i++) {
                allPosts.append('<div class="single-post clearfix"><input id="checkbox" type="checkbox"><p>' + tasks[i] + '</p><a href="#" class="button alert delete-button">Delete</a></div>');

                $(".single-post").unbind("click").on("click", ".delete-button", function() {
                    console.log(i);
                    deleteTask(i);
                });

            }
        }

        function deleteTask(i) {
            console.log(i);
            tasks.splice(i, 1);

            renderTasks();
        }


    })(jQuery, window);

代码最好在第 32 行的http://jsfiddle.net/ymvhwzsf/4/ 查看

Answer 1

在我们的例子中，最好使用event delegation，像这样

$(".all-posts").on("click", ".single-post .delete-button", function() {
    deleteTask($(this).data('id'));
});

并为链接添加数据属性

data-id="' + i + '"

Example