关于jquery的一个小问题

$(document).ready(function(){
    $('#button').click(function(){
        var toAdd = $('input[name=checkListItem]').val();
        $('.list').append("<div class='item'>"+toAdd+"</div>");
    });
    //==法1(不可行）===
    $('.item').click(function(){
        $(this).remove();
    });
    //==法2(不可行)==
    $(document).ready(function(){
        $('.item').click(function(){
            $(this).remove();
        });
    }）；
    //==法3(可行）==
    $(document).on('click', '.item', function(){
        $(this).remove();
    });
});

代码目的：实现todolist功能，点击button添加.item条目，点击条目删除条目；

问题：为什么法1和法2不可行，而法3可行？

---

1和2是一样的，因为这段代码本身就在ready事件里执行的，所以2的ready相当于立即执行。

之所以这两个方法不可行是因为它们执行的时候还没有item元素，所以它们的选择器没有作用，自然添加事件的代码也是没有作用的。

第三种方法可以是因为将事件代理到了document上面，这样任何时候都能正常触发点击事件，而传入的选择器参数是在每次点击的时候才会用来选择元素的，所以能够选中item元素

---

请百度搜索"事件委托"