How to tell that all dynamically constructed textboxes have a value

Question

Given code that calculates (and then constructs) how many text boxes a page has:

        var gEmails = '<p>Please enter your desired emails</p>';

        for (var i = 0; i < numInputs2Render; i++) {
            gEmails = gEmails + '<input type="text" id="Email' + i + '" class="emailInput">';
        }

How can I add code that can tell each input has been blurred by the user? This answer gets me oh so close but i need code that is fired when one of my dynamic text boxes hears a blur event so I can test for non-empty condition in _all matched inputs.

thx

Answer 1

By adding an onblur event to the box's constructor:

onblur="javaScript:checkEmails();"

Answer 2

Listen to the blur event on all input fields. This callback function will be fired if any of the fields is blurred.

$('.emailInput').blur(function() {
    var nonEmpty = $('.emailInput').filter(function() {
        return $.trim(this.value) != '';
    });
    if(nonEmpty.length > 0) {
        // do something
    }
});

You can also setup a live handler using

$('.emailInput').live('blur', function() ..

so you don't have to keep binding the blur event when new inputs are inserted. Just do it once initially and it will take care of all dynamically inserted text boxes.