Как добавить слушателей событий динамически

Question

Поэтому у меня есть некоторый код (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, и в будущем я хочу динамически создавать категории N-btn (s) в зависимости от содержимого файла JSON. AS такой есть способ сделать это, либо динамически генерируя прослушиватели событий, либо как-то делая это с помощью классов?

Спасибо за вашу помощь

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

Надеется, что это помогает.

Answer 2

Предполагая, что вы знаете, что элемент типа эти категории, вы можете добавить обработчик, который работает в общем (в предположении button для элемента с имеет #categoryX-btn ID - настроить в соответствии разметки):

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

Не тестировалось, но вы должны получить идею ...

Answer 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 

Answer 4

Как всегда идея пришла ко мне сразу после того, как я разместил здесь.

Я просто добавил это к моему событию функции обработчика

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>