Question

On my page I have

$(function()
{
  $('.load').click(function()
  { 
  var val =  $(this).attr('value'); //get value of the button that called this function
  //do stuff});
});

and some buttons defined on the initial html:

<input type="button" value="getData1" class="load" />

If I later add more buttons dinamically of the same class, and want them to operate the same way, how can I bind them to the original function?

I was looking at .on but it seems to define a NEW function. I’m hoping there is a way to use the one already defined.

Or should I define the function separately and call it from both places? If so, how can I pass the element that called the function as a parameter?

Any assistance will be much thanked.

Answer 1

This is what on is for, as you mentioned. On allows you to attach a listener to parts of the document that contain the elements you want to monitor.

$(document).on('click', '.load', function() { 
    var val =  $(this).attr('value');
});

Using document isn’t the best, so ideally you would put some selector in there that will match an element that surrounds all of your buttons, current and future.

Buttons that are added inside document after calling on will also trigger this handler even though they have been added later.