使用 .each() 将 .click() 分配给多个类

Question

我正在尝试将事件处理程序分配给一堆 classes，这些事件将在不同点动态创建，并以一种有效的方式进行。

我想我可以创建一个键值对列表，其中 class 作为键，函数作为值，然后执行 .each() 循环以将事件处理程序分配给容器元素（在本例中为“.panel”）。但是，这会导致在页面加载时调用所有函数。知道问题出在哪里吗？

var functionList = {
                       '.name': nameChange(),
                       '.email': sendEmail(),
                       '.notes': editNotes()                 
    };

$.each(functionList, function(k,v) {    
     $('.panel').on('click',k,v)
});

更新：为清楚起见，我将 .click() 更改为 .on('click')（问题仍然存在）

Answer 1

.on() 用于在动态添加的元素上绑定事件。试试这个-

$.each(functionList, function(k,v) {    
  $('.panel').on('click', k, function(){v})
});

Answer 2

你的问题出在functionList对象的声明上。您将每个属性的值设置为函数的值，因为您实际上是在为每个属性调用函数。尝试删除每个值的括号。

var functionList = {
   '.name': nameChange,
   '.email': sendEmail,
   '.notes': editNotes                 
};

使用 .each() 将 .click() 分配给多个类

Assign .click() to multiple classes using .each()

jquery

each

使用 .each() 将 .click() 分配给多个 类

Assign .click() to multiple classes using .each()

jquery

each

使用 .each() 将 .click() 分配给多个类