如果元素从一开始就不在页面中，则函数不响应

Question

我有这个功能：

$(function(){
    $(".todo-task").click(function(){
        $(".todo-task").css('background-color','green');
    });
});

问题是“todo-task”不是加载页面时存在的元素，而是附加到具有其他功能的页面。 我认为上面的这个事实阻止了我编写的函数发生，因为如果我在页面中出现“todo-task”时在控制器中粘贴完全相同的函数，那么一切都很完美。

我该怎么办？

Answer 1

使用事件委托：

$(function(){
    $(document).on("click", ".todo-task", function(){
        $(".todo-task").css('background-color','green');
    });
});

请注意document可以 - 并且应该被最初存在的最接近的父项替换（为了提高性能 - 当您知道它将在特定div中时，无需查看整个文档。）