Question

我正在尝试在我的一个dataTables编辑器字段（#DTE_Field_phone）上使用Masked Input插件。由于某种原因，掩码未应用此代码：

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

我在表和编辑器初始化之后调用了掩码，但仍然没有。关于我可能做错的任何想法？

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

我没有dataTables的经验但是从你的代码中我认为你正在使用弹出编辑器？如果是这样，你可能需要在打开编辑器之后触发的事件中应用掩码：

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

Answer 2

您在$( document ).ready(function (e) {内声明Jquery(function($)功能，这是错误的......

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

您不能同时使用这两个功能，因为它们会挂钩同一事件。

请参阅documentation。

解决方案1 

jQuery(function ($) {
...
}

解决方案2

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

jQuery Masked Input插件无法处理表单输入？

2 个答案: