Best practice for attaching handlers (with different actions) to multiple generated elements?
<p>Say I'm dynamically generating some controls (example using jQuery):</p>

<pre><code>for (var c=0 ; c&lt;100 ; c++) {
  $(body).append('&lt;input id="btn_'+c+'" type="button" value="Button #'+c+'" /&gt;');
}
</code></pre>

<p>And I want them to have different action depending on which one is clicked (mouseover, etc), what is the best practice for attaching a handler so it knows which button is being clicked? I can think of 3 alternatives:</p>

<ol>
<li>Attach the same handler (via javascript) to all buttons and have the handler parse the element id to determine which one is clicked</li>
<li>Add the handlers inline when generating the HTML for the controls (ie have onclick="do_something('+c+');")</li>
<li>Attach different handler (eg with a loop) for each element that has the button number set in the handler argument</li>
</ol>

<p>Which method is preferred or is there another alternative?</p>

<p><strong>Edit:</strong></p>

<p>Sorry, but I should probably mention that the number of generated elements are variable and the handler only needs the button number (ie not a completely different handler function for each button). A simple example use case would be a list grabbed via ajax that you want the user to order, in this case the handler would just need the index number for the list.</p>

<p>For fixed number of elements with distinct handlers David's answer makes sense.</p>
