Multiple .on() events

Question

My app has a feature that when you click the new data button, HTML is loaded to the page via ajax. Because I am using AJAX, all events I want to add has to be bound using the on() method.

There are 4 on('click') functions that are bound to 4 different HTML elements:

// save data
$('#container').on( {
    click: function() {
       // save code here            
    }
}, "a.save_data" );

// cancel data
$('#container').on( {
    click: function() {
       // cancel code here            
    }
}, "a.cancel_data" );

// edit data
$('#container').on( {
    click: function() {
        // edit code here            
    }
}, "a.edit_data" );

// delete data
$('#container').on( {
    click: function() {
        // delete code here
    }
}, "a.delete_data" );

Each of these functions share multiple jQuery wrappers to select certain elements within the HTML:

$(this).closest('div.content_wrap');
$(this).closest('div.Content');

Please note: The reason I am using selectors such as $(this).closest() is because the user has the ability to add the same HTML multiple times on to the page.

First, is there a better way to organize all of the on() functions? Maybe combine them into one object OR create a function?

Second, because all 4 functions use the same jQuery wrappers, is there any way to declare them in a variable globally somewhere, so i don't keep retyping them. I wasn't able to figure out how declare variables with $(this) and apply it to more than one function.

To me, how I am doing it doesn't seem very DRY and I was wondering if someone can help me better organize this.

Answer 1

Here's how I'd probably do it (basically, it's the same as in the answer I linked to in the comments, I'm just adding it here for clarity)

var handlers = {
  save_data:   function (event, content, wrap) {
    // save code
  },

  cancel_data: function (event, content, wrap) {
    // cancel code
  },

  edit_data:   function (event, content, wrap) {
    // edit code
  },

  delete_date: function (event, content, wrap) {
    // delete code
  }
};

$('#container a').on('click', function (event) {
  var klass = this.className,
      content,
      wrap;

  if(typeof handlers[klass] === "function") {
    content = $(this).closest("div.Content"),
    wrap    = $(this).closest("div.content_wrap");
    handlers[klass].call(this, event, content, wrap);
  }

  // you want to always "absorb" the click event, you can
  // do so here or in the if-block above
  //   event.preventDefault();
});

You can write the handler functions just like you'd write them in your orginal code (i.e. this will refer to the right element, etc.). However, the click event handler will pass along the the content and wrap arguments, so you don't have to have code to select those elements in every handler function.

Of course, if your links have multiple classes, the className trick won't work. That's why I'd advocate (as I do in the answer I linked to) using a data-* attribute if possible.

Answer 2

Perhaps something like this?

function manipulateData($action){
    $('#container').on( {
        click: function() {
            switch(action){
                case "save" : saveData();
                    break;
                case "delete" : deleteData();
            }
        }
    }, "a." + action + "_data" );
}

Also, see Flambinos comment