jquery masked input on loaded content

Question

So I have a joomla! page that is partly generated by functions based on the user. So parts of the forms that I need to use the 'masked input plug-in' on are loaded via functions on page load. The issue I have is, on the fields that are standard HTML on the page, the plugin works fine but on the fields that are generated by my php functions, the fields lock up and don't allow any input. My guess is that it's an issue with the php functions pulling in the forms after the jquery plugin has fired but I tried placing the .mask call in a $(document).ready and no luck.

here's a snippet...

jQuery(function($){
  $("#subNumber").mask("[phone]");
$(".numFix").mask("[phone]");
});

THIS WORKS -->

<form name = "subAct" id = "subAct" method="post">
<div class="col1"><input class="subaccountname" name="subName" type="text" id="subName"/></div>
<div class="col2"><input class="subaccountnumber" name="subNumber" type="text" id = "subNumber"/></div>
<div class="col3"><a href="javascript:submit()" class="buttonaddsub" id ="addSubBut">Add a New Account</a></div>
</form>

THIS ONE DOESN'T --> this function -->

<?php dashboardFunction::displaySubAccount($uid) ?>

loads in this form -->

<form name = "add_reg_num_<?php echo $pin ?>" id = "add_reg_num_<?php echo $pin ?>" method="post">
<div class="regisnumberadd"><input name="regNum" type="text" class = "numFix" />
<input name="regNumPin" type="hidden" value = "<?php echo $pin ?>"/>
</div>
<div class="clear"></div>
<div class="addregisnum"><a href="javascript:;" onClick="subRegNum(<?php echo $pin ?>)">Add Number</a></div>
</form>

Answer 1

I think since the content loads dynamicly you need to use .live

I don't know how to use .live with .mask.

There is also an alternative. You can put .mask code in callback function of dynamic loading.

$("#dynamicContent").load("loadFromMe.php",function(){
    $("#subNumber").mask("[phone]");
    $(".numFix").mask("[phone]");
});

Answer 2

Dynamic Jquery Input mask Solution (swicth masking programatically)

$(document).ready(function () {
        $("[data-mask]").inputmask();
        // Do something exciting          
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_endRequest(function () {
            // re-bind your jQuery events here
            $("[data-mask]").inputmask();                
        });

    });


            if (is_loose == "True") {                    
                $("#it_qty").removeAttr("data-inputmask","'mask': '9{0,20}'");
                $("#it_qty").attr("data-inputmask", "'mask': '9{0,20}.9{0,2}'");

                $("[data-mask]").inputmask();

            } else {

                $("#it_qty").removeAttr("data-inputmask", "'mask': '9{0,20}.9{0,2}'");
                $("#it_qty").attr("data-inputmask", "'mask': '9{0,20}'");
                $("[data-mask]").inputmask();
            }

Answer 3

All you need to do is attach an event binding using jQuery .on method and any dynamically created item will be wired to that event.

I answered a similar question here https://stackoverflow.com/a/10203361/12442