How do you pass semantic data do a jQuery delegate?
<p>Delegation/"on" in jQuery seems to be the new hotness. And I totally get that the delegate function receives the event object.</p>

<p>But my question is how do I pass semantic/application data to the delegate?</p>

<h2>Old way, without delegation:</h2>

<pre><code>// bind a new closure for each button
for (var i = 0; i &lt; MyApp.Widgets.length; i++) {
  var widgetId = MyApp.Widgets[i];

  $('#myapp-widget-button-' + i).click(
    function () {
      MyApp.upgradeWidgetById(widgetId);
    }
  );
}
</code></pre>

<h2>New way, with delegation (and parts missing):</h2>

<pre><code>// refactor custom closures into one delegate
$('#myapp-widget-container').delegate('.myapp-widget-button', 'click', function () {
  // MyApp.upgradeWidgetById( ... )
});
</code></pre>

<p>Where does the <code>widgetId</code> come from? I'm sensing that this is where data attributes come into play:</p>

<h2>New way, with delegation and data attributes</h2>

<pre><code>// attach application data to the handled objects
for (var i = 0; i &lt; MyApp.Widgets.length; i++) {
  var widgetId = MyApp.Widgets[i];

  $('#myapp-widget-button-' + i).data('widgetId', widgetId);
}

// refactor custom closures into one delegate
$('#myapp-widget-container').delegate('.myapp-widget-button', 'click', function () {
  var widgetId = $(this).data('widgetId');

  MyApp.upgradeWidgetById(widgetId)
});
</code></pre>

<p>But is that really the only way? I'm concerned because not many tutorials mention data attributes in relation to delegates so I'm wondering if I'm missing something or doing something wrong.</p>

<p>Edit: Edited to reflect that "on" is the new black, despite being a delegate in sheep's clothing.</p>
