需求：动态添加的多个dom对,需要分别绑定事件。而且要往事件里面传参。

遇到的几个问题：
1.动态添加dom,因为是动态添加的dom,不能使用 $(‘#dom的id’).on(‘click’, function () {}); 这种方式 必须用$(document).on

$(document).on的原型有两种

2.$(document).on的selector用class还是id？如果用class是每个dom绑定一次还是添加后所有dom按class绑定一次？

不能每个dom绑定一次，这样前面添加的dom都被多次。
所有dom按照class绑定一次,这样不能分别传参。
最后每个每一个id有一个on绑定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
for (let dataKey in data) {
    var dataValue=data[dataKey];

    $("#exeStatWindow").append( '<button class="layui-btn " id="'+ip+dataKey+  '">'+dataKey+'</button>')
    var selector="#"+ip+dataKey
    selector=selector.replaceAll(":","\\:")
    selector=selector.replaceAll(".","\\.")

    //每一个id有自己的一个on绑定
    $(document).on( {'click.myevent': function(e){
            openExeStatTable(e.data.dataKey,e.data.dataValue)
        }},selector,  {
        dataKey: dataKey,
        dataValue: dataValue
    });
}

3.seletor里面的冒号需要转义

4.添加dom成功了也通过事件传参成功了。但是如果一个dom被添加了两次就会重复，所以每次添加前先把之前的remove。问题出现了，虽然dom没了,但是它绑定的事件还在,又会一个第二次添加的dom，绑上了第一次的事件，身上有了两个事件。
解决：每次remove dom之前把它这个id绑定的事件给$(document).off掉 。 （因为之前是通过id给on上的所以现在也用id给off掉 我试了id给on上 用class给off掉 貌似不行 不确定）

1
2
3
4
5
6
7
8
9
10
11

end: function () {
    var father=$("#exeStatWindow")[0]
    var childs = father.childNodes;
    for(var i = childs.length - 1; i >= 0; i--) {
        console.log(  $(childs[i])[0].id)
        var selector="#"+$(childs[i])[0].id
        $(document).off('click.myevent', selector);
        childs[i].remove()
    }
},

5.得保证每个dom唯一id

6.我发现其实没必要硬要通过绑定事件传参，每个dom通过自己id从全局变量里读就行了。

7.我发现layui那lay-filter实现了这个功能(动态添加的dom绑定了能传参的事件) 而且我以前还用过 想看看他怎么实现的 完全看不懂