Question

我正在创建一个todo-list，将任务推送到一个数组中，然后通过循环遍历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

在循环数组时绑定id以删除按钮

1 个答案: