Best Way To Assign Jquery Events To Dynamic Buttons

I am generating twitter bootstrap modals dynamically based on the user action (Long Story). Lets say some times user can see 100 modals on his screen. In each and every modal I hav

Solution 1:

The jQuery on() can help you in this. First you need to detach appending DATA to your element ID like btn+btnNumber. You can add your custom information in any data-x attribute like data-custom-info and use the jQuery attr('data-custom-info') syntax to retrieve the information. The event handlers registered with on() method is also available for future elements(elements created after script execution). Like below.

When creating new button, add render it as..

<input .... class="btnWithData" data-custom-info="1" ... />
<input .... class="btnWithData" data-custom-info="2" ... /> 

and your event handler goes like..

$(document).ready(function(){
 $('body').on('click','.btnWithData',function(){
//DO WHATEVER
var buttonData=$(this).attr('data-custom-info');
//DO WHATEVER
 });
});

Solution 2:

You should assign delegated event listeners using jQuery.on() method as @Ananthan-Unni suggests, but in the form:

$.on('click', 'button', listener)    

In this case you do not need to assign unique ids or attributes. You can use tag name or class name as a selector (2nd argument).

Have a look here: https://api.jquery.com/on/ and read on delegated events.

Solution 3:

Best is don't use closures they require memory. Rely on good old data tags, instead:

$(document).ready(function () {
  $("#wrapper").on("click", "btnNameAttr", function () {
    var n;

    n = $(this).data("number");
    // code goes here
  });
});

To differentiate the actually clicked element inside #wrapper you use data-number attributes like this:

<div id="wrapper">
  <img data-number="000" />
  <img data-number="001" />
  <img data-number="002" />
  <img data-number="003" />
</div>

This code will perform much better and you can still have all functionality you want by using wrapping <div> elements and data-number="" attributes. And you don't interfere with class or id attributes you might already have on those elements.

You can even add the command to the tag:

<img data-number="000" data-command="edit" />
<img data-number="000" data-command="show" />
<img data-number="000" data-command="delete" />

And switch on it:

switch ($(this).data("command"))
{
  case "edit":
    // edit element with number n here
    break;
}