javascript - jqueyr on()绑定多个动态元素的点击事件不同处理函数

问题描述

问 题

我目前所知道的方法如下：
$(document).on('click','.attachment',function () {
    console.log('attachment点击了')
}).on('click','.amend',function () {
    console.log('amend点击了')
})
但是看网上说on()可以绑定多个事件多个函数：
$(document).on({ 
    click:function(){ //事件1
     ......
    },
    keyup:function() { //事件2
       .......
    },
    keydown:function(){ //事件3
     .......
    }
},'.select1','.select2','select3'); //元素1,2,3
并不能，只能在最后的元素上绑定三个事件，这不是我想要的！我想要的是不同的元素都绑定点击事件处理的函数却不同的方法。
有哪位大神知道麻烦告诉小弟一下，感激不尽

解决方案

什么意思，不想写太多重复的$(document).on么？

如果是这样的话，可以把调用的function放在一个对象里面

 <div class='a aaaaaa aaaaaaa' style="width: 100px;height: 100px;background: #ccc"></div>
 <div class='b' style="width: 100px;height: 100px;background: #000"></div>
 <div class='c' style="width: 100px;height: 100px;background: #444"></div>
 
 <script>
 const clickFunc = {
     a: function() {
         console.log('aaaaaa');
     },
     b: function() {
         console.log('bbbbbb');
     },
     c: function() {
         console.log('cccccc');
     }
 };
 $(document).on('click', '.a, .b, .c', function(e) {
     clickFunc[e.target.classList[0]]();
 });

这篇关于javascript - jqueyr on()绑定多个动态元素的点击事件不同处理函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！