jQuery Masked Input plugin not working on form input?

Question

I'm trying to use the Masked Input plugin on one of my dataTables Editor fields (#DTE_Field_phone). For some reason, the mask isn't being applied with this code:

$('#DTE_Field_phone').mask('(999) 999-9999');

I'm calling the mask after the table and editor are initialized, yet still nothing. Any ideas on what I may be doing wrong?

HTML:

<div class="DTE_Field_Input" data-dte-e="input">
    <input id="DTE_Field_phone"></input>
    <div class="DTE_Field_Error" data-dte-e="msg-error" style="display: none;"></div>
    <div class="DTE_Field_Message" data-dte-e="msg-message"></div>
    <div class="DTE_Field_Info" data-dte-e="msg-info"></div>
</div>

jQuery:

jQuery(function ($) {
    $( document ).ready(function (e) {
        var editor = new $.fn.dataTable.Editor({
            "ajaxUrl": "../wp-content/plugins/contacts/php/table.wp_contacts.php",
            "domTable": "#form_results7",
            "fields": [
                { "label": "Contact",
                  "name": "contact",
                  "type": "text" },
                { "label": "Company",
                  "name": "company",
                  "type": "text" },
                { "label": "Email",
                  "name": "email",
                  "type": "text" },
                { "label": "Phone",
                  "name": "phone",
                  "type": "text" },
                { "label": "Fax",
                  "name": "fax",
                  "type": "text" },
                { "label": "Address",
                  "name": "address",
                  "type": "text" },
                { "label": "Tax ID",
                  "name": "tax_id",
                  "type": "text" }
            ]
        });
        $('#add_items').on('click', function (e) {
            e.preventDefault();
            editor.create(
                'Add Contact',
                {
                    "label": "Add",
                    "fn": function () {
                        editor.submit()
                    }
                }
            );
        });
        $('#form_results7').on('click', 'a.editor_edit', function (e) {
            e.preventDefault();
            editor.edit(
                $(this).parents('tr')[0],
                'Edit Contact',
                { "label": "Update", "fn": function () { editor.submit() } }
            );
        });
        $('#form_results7').on('click', 'a.editor_remove', function (e) {
            e.preventDefault();
            editor.message( "Are you sure you want to remove this row?" );
            editor.remove( $(this).parents('tr')[0], 'Delete row', {
                "label": "Confirm",
                "fn": function () { this.submit(); }
            });
        });
        var oTable = $('#form_results7').dataTable({
            "bAutoWidth": false,
            "bJQueryUI": true,
            "sAjaxSource": "../wp-content/plugins/contacts/php/table.wp_contacts.php",
            "sDom": "<'H'lfr>t<'F'ip>",
            "aoColumns": [
                { "mData": "contact",
                  "sWidth": "14%" },
                { "mData": "company",
                  "sWidth": "14%" },
                { "mData": "email",
                  "sWidth": "17%" },
                { "mData": "phone",
                  "sWidth": "11%" },
                { "mData": "fax",
                  "sWidth": "11%" },
                { "mData": "address",
                  "sWidth": "17%" },
                { "mData": "tax_id",
                  "sWidth": "8%" },
                { "bSortable": false,
                  "mData": null,
                  "sClass": "center",
                  "sDefaultContent": '<a href="" class="editor_edit">Edit</a> | <a href="" class="editor_remove">Delete</a>',
                  "sWidth": "8%" }
            ],
            "sPaginationType": "full_numbers"
        });
        $('#DTE_Field_phone').mask("(999) 999-9999");
        try {$("#form_results7_length select").msDropDown();} catch(e) {alert(e.message);}
        $('#refresh_items').click(function() {
            location.reload();
        });
        $("#reset").click(function() {
            $("#form_results7_filter input").val("");
            oTable.fnFilter("");
            oTable.fnSort([[ 0, "asc" ]]);
        });
    });
});

Answer 1

I have no experience of dataTables but from your code I think you are using the popup editor? If so you probably need to apply the mask in the event which is fired after the editor is opened like this:

editor.on('onOpen', function () {
    $('#DTE_Field_phone').mask('(999) 999-9999');
});

Answer 2

You're declaring a $( document ).ready(function (e) { function inside a Jquery(function($), which is wrong...

jQuery(function ($) {
    $( document ).ready(function (e) {
    ...
    }
}

You can't use these 2 functions together, since they hook to the same event.

See here in the documentation.

Solution 1

jQuery(function ($) {
...
}

Solution 2

$( document ).ready(function (e) {
...
}