小编Luc*_*one的帖子

我会在纯javascript中模拟jQuery .on( events , selector , data) 方法的主要功能.

例如

$(document).on('click','.button',function() {
   console.log("jquery onclick"); 
});

我认为这样就足够了

document.addEventListener('click',function(e) {
    if(e.target.className == 'button2') {
         console.log("It works");   
    }
});

但是,当我有这个HTML结构时:

<button class="button2">Hello <span>World</span></button>

当被触发的单击事件我的脚本不工作的span元素,因为e.target是span.(我忽略了这个问题,具有多个类的元素的复杂性,以及交叉浏览器的兼容性)

jQuery的源代码不易阅读,我不明白它是如何工作的(因为jQuery中的第一段代码与我的html结构一起工作).

我需要这种方法,因为我的html是动态的,并且多次创建,删除和重新创建具有此类的按钮.我不希望每次都添加监听器.

如果可能的话,我会避免包含jquery库.

那么,我可以这样做吗？

这里是用于测试的jsFiddle.

我有这个表结构:

编辑更复杂的例子:添加隐藏范围

category|   day      |   a   |
--------|------------|-------|
1       | 2012-01-01 |   4   |
1       | 2012-01-02 |   4   |
1       | 2012-01-03 |   4   |
1       | 2012-01-04 |   4   |
1       | 2012-01-05 |   5   |
1       | 2012-01-06 |   5   |
1       | 2012-01-07 |   5   |
1       | 2012-01-08 |   4   |
1       | 2012-01-09 |   4   |
1       | 2012-01-10 |   4   |
1       | 2012-01-11 |   5   |
1       | 2012-01-12 |   5   | …