Need a ready() event for page elements

[vlucas]

I think there is a real need for a "ready" event that can be applied to elements with selectors, kind of like the "load" event that can be. The problem with using "load" - as the manual states - is that you have to use it *before* the element in the HTML source order or it won't work. There is a need for a "ready" event for individual elements that would be especially useful when combined with other events like "click" or "change".

Example:

---

<< element >>

$('#selectBox').bind('ready change', function() { doSomething(this); });

function doSomething(jqEl) {
    if(jqEl.val() == "blah") {
        $('#myDiv').show();
    } else {
        $('#myDiv').hide();
    }
}

---

There are cases where an option may be pre-selected (especially when correcting validation errors), but the doSomething() event will not be fired when the page is loaded (In this case, resulting in the '#myDiv' element not displaying when it needs to). There are also times when it's not possible to output the javascript *before* the element, like if it's being put together dynamically from a database and you want to output all the javascript together instead of having it strewn everywhere just before every element that needs it. A "ready" event would be a much more elegant solution, and would reduce the amount of code required to produce the same result otherwise.

Example:

---

<< element >>

doSomething($('#selectBox')); // extra code for element load/ready
$('#selectBox').bind('change', function() { doSomething(this); });

function doSomething(jqEl) {
    if(jqEl.val() == "blah") {
        $('#myDiv').show();
    } else {
        $('#myDiv').hide();
    }
}

---

So in this case, redundant code must be produced when the javascript cannot be output before the actual element in the HTML source. A simple "ready" event for elements would eliminate the need for the extra repetitive code.

[flesler]

While I understand the test case, there's no logic for the 'ready' event. It's just an execute-right-away. You simply do that with each:

function doSomething() {
    if( this.value == "blah" )
        $('#myDiv').show();
    else
        $('#myDiv').hide();
}
$('#selectBox').change(doSomething).each(doSomething);

BTW, note the your example doesn't work. doSomething(this) passes a dom element.