Question

I am trying to implement a combobox on a form that have his select fields loaded in ajax.

I want to call :

$('.combobox').combobox();

When a new combobox is ready.

Currently, I put this in my ajax response :

<script type="text/javascript">
  $(document).ready(function() {
    $('.combobox').combobox();
  });
</script>

This works but looks bad in term of resources. So I was looking for a better way to handle ready events.

I tried :

 $('.combobox').live('ready', function() {
     $(this).combobox();
 });

But read later that live() does not support ready event.

Then, I tried :

    $('body').delegate('.combobox', 'ready', function() {
        $(this).combobox();
    });

But it doesn’t work too.

So here is the question: what is the best way to handle current and future ready events on a selector in jquery?

Answer 1

There is no reason to bind the ready event to anything other than the document.

In fact, jQuery takes any other selector that you place before .ready and ignores it.

There is a built-in promise object for .ready that you can use with .done() as an alternative.

$.ready.promise().done(function(){
    $('.combobox').combobox();
});

or you could simply use

$(function(){
    $('.combobox').combobox();
});

or

$(document).ready(function(){
    $('.combobox').combobox();
});

The benefit of the promise version is you can use it like this:

$.when( $.ready, $.post("foobar.php") ).done(function() {
    $(".combobox").combobox();
})