masked input inside xeditable text box not working

Question

I have an x-editable input for my bootstrap application , which I'm using to edit usernames. now i need to use the jquery.maskedinput.min.js to get the masked format while iam entering in text box which is appering when i click on the span as in the x-editable .this is my sample html code

<div id="sZip" class="profile-info-value ">
<span class="editable" id="Dob">dob</span>
</div>

and i achived the x editable by applying the j query like this

  $('#zip').editable({
                    type: 'text',
                    name: 'zip',
                    tpl:'   <input type="text" id ="zipiddemo" class="form-control    input-sm dd" style="padding-right: 24px;">'

                });

and it is working fine now i need to make that text box maskable ,but when i am calling the masked input function like this

$(".dd").mask("99999-?9999");

it is not working ,i dont know the exact reason.any help will be appreciated

Answer 1

It's not working because the x editable elements are added dynamically.

I hope this works.

$('#users a').editable({
    type: 'text',
    name: 'username',
    tpl: '<input type="text" id ="zipiddemo" class="mask form-control    input-sm dd" style="padding-right: 24px;">'
});

$(document).on("focus", ".mask", function () {
    $(this).mask("(999) 999-9999? x99999");
});

DEMO

Answer 2

Or just do:

  $('#zip .editable').editable({
                type: 'text',
                name: 'zip',
                tpl:'   <input type="text" id ="zipiddemo" class="form-control    input-sm dd" style="padding-right: 24px;">'

            }).on('shown',function(){
$("input#zipiddemo").mask("99-999");
  });

DEMO