Generate events from map function

I have a dozen of events like this one inside a function :

'click .bname1': function(e, i) {
'click .bname2': function(e, i) {
 }, ...

i wish to use an array of names [‘name1’, ‘name2’, ‘name3’, …] to create events objects

I tried the following, creation an o = {} empty object, and in a map function of my names creating event objects like this:

o['click .' + name] = function (e, i) {
$('.course').not('.' + name).hide();

But when i pass the o object to my events function it’s not working. Expects to get an object with properties and functions. The following worked great for me:

var arr = ['name1', 'name2', 'name3'];
var o = {};>{
  o['click .'+name] = function (e, i) {

If this is not working either your class names are off or you are not properly getting o into events.

data attribute is more elegant way to implement this.


You were right, the code was ok.
Is it possible that the problem comes from the fact i create the array using a call to the database.
var arr = db.find({}).fetch()
And the events function take the object while it’s still empty… ?

Yes that probably is your issue. You need to call; everytime your collection changes. In your case it would look something like this:

    var arr = db.find({}).fetch();
    var o = {};>{
       o['click .'+name] = function (e, i) {

Indeed if i log the arr i get

main.js:41 []
main.js:41 (20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Isnt it strange that db.find take so much time?
I tried using an async method to await db.fnd({}).fetch() but it doesnt change the behavior.
Is there a way to avoid this problem?

Now the events are loaded, but somehow only once very two times…

@danass there is an example:

    <li><a href="" data-mykey="1">Do the Tutorial</a></li>
    <li><a href="" data-mykey="2">Follow the Guide</a></li>
  'click a[data-mykey]'(e) {

    console.log(`clicked on ${}`);
1 Like