What is the preferred pattern for re-binding jQuery-style UI interfaces after AJAX load?
<p>This always gets me. After initializing all lovely UI elements on a web page, I load some content in (either into a modal or tabs for example) and the newly loaded content does not have the UI elements initialized. eg:</p>



<pre class="lang-js prettyprint-override"><code>$('a.button').button(); // jquery ui button as an example
$('select').chosen(); // chosen ui as another example
$('#content').load('/uri'); // content is not styled :(
</code></pre>

<p>My current approach is to create a registry of elements that need binding:</p>

<pre class="lang-js prettyprint-override"><code>var uiRegistry = {
  registry: [],
  push: function (func) { this.registry.push(func) },
  apply: function (scope) {
    $.each(uiRegistry.registry, function (i, func) {
      func(scope);
    });
  }
};

uiRegistry.push(function (scope) {
  $('a.button', scope).button();
  $('select', scope).chosen();
});

uiRegistry.apply('body'); // content gets styled as per usual

$('#content').load('/uri', function () {
  uiRegistry.apply($(this)); // content gets styled :)
});
</code></pre>

<p>I can't be the only person with this problem, so are there any better patterns for doing this?</p>
