Order Of Events For Dynamically Added Elements And Masked-input Plugin

So the non-ajax version of my webapp is fine, cause the events are added in the order I want and all the events are added on the cell-phone element in question. But for my ajax ap

Solution 1:

I came up with just doing it this way below. so when i focus on the input, i dynamically add the event if the plugin has'nt been added already. There was an issue with event ordering in my app. so i make sure i add the mask first, then my blur event.

$('#container').on('focusin', '.input-phone', function() {
    var $this = $(this);
    if( (typeof $this.data()['rawMaskFn'] !== "function") ) {
        //dynamically adds the mask plugin
        $this.mask("(999)-999-9999"); //probably adds a blur event

        //make sure its the first thing in blur event
        if($this.hasClass('input-cell-phone')) { //********* moved here so this blur event can get added after the above event

            $('.input-cell-phone').blur(function() {//on() way doesnt work here for some reason
                //if clear cell phone, make sure to clear daytime phone
                var phone_val = $.trim($(this).val());
                if(phone_val==""){
                    //find daytime equivilent and clear too
                    $(this).parents('.container').find('input.input-day-phone').val('');
                }
            });
        }
    }
});