How to bind delegated events within JavaScript for-loop -

i have array of objects looping on using standard javascript for-loop. trying use jquery create delegated events each 1 of these objects while in loop. each object has eventtype property, can custom event, , el property, string representing css selector element. point of using delegated events want bind events body or document such if element doesn't exist in dom yet, still get proper event handler. pseudocode below:

// fn looping (all of in large prototype definition) trackall: function(callback) {   (var = 0, l = this.dataset.length; < l; i++) {         var current_object = this.dataset[i];         // validate properties first (check errors)         this.propertycheck(current_object);         // run tracking         if (callback && typeof callback === 'function') {             this.autotracker(current_object, callback);         } else {             this.autotracker(current_object);         }      } } 

in above, dataset array of objects. each object has footprint this:

{     tracktype: 'event',     el: '.some_class li > a',     page: 'homepage',     type: 'custom description',     label: window.location.href,     eventtype: 'click',     bodyclass: null,     row: null } 

so particular object refers particular anchor link element tracktype of 'event' , eventtype of 'click'

ultimately, there scores of these objects in dataset array, , trying loop through , create event listeners/handlers each. here's bit more pseudocode handles this:

autotracker: function(config, callback) {     var self = this;     if (config.el !== null && config.el !== 'undefined') {         config.el = $(config.el);          if (config.tracktype.tolowercase() === 'event' || config.tracktype.tolowercase() === 'pageview') {              $(document).on(config.eventtype, config.el, function(e) {                 console.log('fired!'); //=> fires items in array on 1 single click (or whatever eventtype)             });             if (callback && typeof callback === 'function') {                 callback.apply(config); //=> keep reference `config` object in callback              }         }     }  } 

so, above function gets called each object in dataset array within loop can seen in trackall function (which calls autotracker function). problem whatever run in handler callback $(document).on(config.eventtype, config.el, function(e) { ... }); gets run every item in array immediately. in other words, clicking on body example trigger handler every object in array @ once.

how can create delegated events events bound body or document within loop such won't fire every single event @ once? feel there variable scoping issue, , able create , bind events within loop using closure , .bind() binds events directly elements, elements must exist when function runs. not i'm trying do. need use delegated events if elements don't exist in dom right away, can still events/handlers. ideas here?

the second arg .on() should string, not jquery object.

http://api.jquery.com/on/

a couple comments:

changing type of property, config.el = $(config.el); makes code difficult reason about.

also, seems rather circuitous. more common pattern put semantic class names on elements need event handlers, when create them. <a class=clickable>, .on(click, '.clickable').