Detect when select or text boxes are populated via jQuery

This may sound like a strange question, but hopefully there is an answer out there.

I have a number of select and text boxes in my HTML page. These boxes get populated at some point after the page is loaded and I have no control when they are; I just know that eventually after the page loads the boxes will be filled.

Is there any way to create a listener that can detect when these get populated?

I have been using setInterval/clearInterval, but I was hoping jQuery had a way of 开发者_运维技巧"listening" for when these get populated.

Thoughts?

If their values are being set by the user the you can listen to the change event.

$(document).ready(function() {
    $('input, select').change(function() {
        var $changedElement = $(this);

        if($changedElement.val() != '') {
            // code to keep track of which elements are checked..
        }
    });
});

If elements are being added to the page from script after the page load you'll need to use live rather than change

$('input, select').live('change' function() {
    ....
});

You could use trigger() to, well, trigger the change event, and change() to listen out for the change event:

$(document).ready(
    function(){
        // basically put .trigger('change') after whatever function populates the inputs
        $('form input').populateInputFunction().trigger('change');

    $('input').change(
        function(){
            // do whatever you want to do when the inputs are changed
        });

    });

Without seeing your code it's hard to say exactly how to use them in your page, but hopefully the above example should provide some insight.

From your question it's also ambiguous as to where the change comes from. If it comes from your own jQuery actions then the above should work, if it's coming from the user's actions then you simply have to listen out for the change() event on the inputs (the latter section $('input').change()).