如何动态添加事件监听器答案

【问题标题】：How add event listeners dynamically如何动态添加事件监听器
【发布时间】：2016-10-23 00:03:23
【问题描述】：

我有一些代码（jQuery）：

$(document).on('tap', '#category1-btn', {category : "category1"}, onlineListGen);
$(document).on('tap', '#category2-btn', {category : "category2"}, onlineListGen);
$(document).on('tap', '#category3-btn', {category : "category3"}, onlineListGen);
$(document).on('tap', '#category4-btn', {category : "category4"}, onlineListGen);
$(document).on('tap', '#category5-btn', {category : "category5"}, onlineListGen);
$(document).on('tap', '#category6-btn', {category : "category6"}, onlineListGen);

这似乎违反了 DNRY 规则。更重要的是，类别的数量取决于读取的 JSON 文件，将来我想根据 JSON 文件的内容动态创建 categoryN-btn(s)。因此，有没有办法通过动态生成事件侦听器或以某种方式使用类来完成上述操作？

【问题讨论】：

标签： javascript jquery dynamic event-handling jquery-events

【解决方案1】：

使用for 循环：

var count = N; //N is the count of button from JSON

for(var i=0;i<count;i++){
     $(document).on('tap', '#category'+i+'-btn', {category : "category"+i}, onlineListGen);
}

希望这会有所帮助。

【讨论】：

【解决方案2】：

和往常一样，我刚在这里发帖后就想到了这个想法。

我只是将它添加到我的事件处理函数中

function myFunction(){
  var category = this.id.slice(0,-4); //the slice removes the '-btn' from the ID
  myData = JSONData[category]
  //some more code that uses myData
}

并使用了事件监听器

$(document).on('tap', '.category-btn', myFunction);

按钮的html在哪里

<a href="#category-1" class="category-btn" id= "category1-btn">category</a>

【讨论】：

【解决方案3】：

您可以将其中一个包装在一个函数中，然后随时调用它。

var tapper = (function(){
  var c = 0;
  return function(){
    $(document).on('tap', '#category'+(++c)+'-btn', {category : 'category'+c}, onlineListGen);
    return $;
  }
})();
tapper(); tapper(); // call whenever and wherever

【讨论】：

拥有通过全局状态工作并将全局状态修改为副作用的方法似乎不是一个易于维护的解决方案。

【解决方案4】：

假设您知道这些类别是什么元素类型，您可以添加一个通用的处理程序（假设具有#categoryX-btn ID 的元素的button - 调整以匹配您的标记）：

$(document).on('tap', 'button', function(ev) {
    var match = /^(category[0-9]+)-btn$/.exec(this.id);
    if (match) {
        ev.data = { category: match[1] };
        return onlineListGen.call(this, ev);
    }
    return true;
});

未测试，但您应该明白...

【讨论】：