Wie Ereignis hinzufügen Hörer dynamisch

Question

So habe ich einige Code (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); 

Dies scheint die DNRY Regel zu verletzen. Außerdem hängt die Anzahl der Kategorien von einer JSON-Datei ab, die gelesen wird, und in Zukunft möchte ich die Kategorie N-btn (s) abhängig vom Inhalt der JSON-Datei dynamisch erstellen. Wie gibt es eine Möglichkeit, obiges zu tun, entweder die Ereignis-Listener dynamisch zu erzeugen oder es irgendwie mit Klassen zu tun?

Vielen Dank für Ihre Hilfe

Answer 1

Verwenden Sie eine for Schleife:

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); 
} 

Hoffnung, das hilft.

Answer 2

Unter der Annahme, dass Sie wissen, welche Elementtypen, um diese Kategorien sind, können Sie einen Handler hinzufügen, die im allgemeinen arbeitet (mit einer button für das Element unter der Annahme hat die #categoryX-btn ID - passen Sie Ihre Markup entsprechen):

$(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; 
}); 

Nicht getestet, aber Sie sollten die Idee bekommen ...

Answer 3

Sie könnten einen von denen in eine Funktion einpacken, und rufen Sie es einfach wann immer.

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 

Answer 4

Wie immer kam die Idee zu mir, nachdem ich hier gepostet habe.

Ich habe einfach diese auf meine Event-Handler-Funktion

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 
} 

und verwendet, um den Ereignis-Listener

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

, wo der HTML-Code für die Schaltfläche ist

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