将 jQuery 输入掩码附加到 DOM 元素

Question

我正在使用 RobinHerbot 的输入掩码，但似乎无法弄清楚如何将其附加到 DOM 元素。我遇到了几个“解决方案”，但没有一个能像我创建新字段那样起作用。我尝试创建一个函数以将其附加到新添加的字段，因为我知道代码不会在文档就绪函数中的 DOM 上工作，但这也没有被证明有帮助。

这是一个 jsfiddle 示例：jsfiddle

JS

var count_2 = 5;

$(document).ready(function () {

    $('#btnAdd').click(function () {
        count_2 = count_2 + 2;
        $('#Table tr:last').after('<tr><td>' + 
            '<p class=\"null_temp\">' +
            '<input type=\"text\" name=\"temp' + count_2 + '\" id=\"temp' + count_2 + '\" placeholder=\"Time\" size=\"10\" maxlength=\"8\" value=\"\" class=\"total_time_regex\" />' +
            '</td></tr>');
    });

        $('.total_time_regex').inputmask('Regex', { 
            regex: "^([0-9]{1,4}:[0-5][0-9])$"
        });
});

$(function() {
    $('.total_time_regex').inputmask('Regex', { 
        regex: "^([-][0-9]{1,4}:[0-5][0-9])|([0-9]{1,4}:[0-5][0-9])$"
    });
});

HTML

<table style="width: 70%" id="Table" name="Table">
    <tr>
        <th>Time</th>
    </tr>
    <tr>
        <td>
            <p class="null_temp">
                <input type="text" name="temp1" id="temp1" placeholder="Time" size="10" maxlength="8" value="" class="total_time_regex" />
            </p>
        </td>
    </tr>
</table>
<input type="button" id="btnAdd" name="btnAdd" value="Add More" class="button" />

CSS

#Table {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse:collapse;
}
#Table td, #Table th {
    font-size:1em;
    border:1px solid #98bf21;
    padding:3px 7px 2px 7px;
}
#Table th {
    font-size:1.4em;
    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#A7C942;
    color:#fff;
}
#Table tr.alt td {
    color:#000;
    background-color:#EAF2D3;
}

非常感谢您的帮助，因为我仍在学习如何处理 DOM 元素。提前谢谢！

Answer 1

您只在文档准备好时才调用一次输入掩码函数，这会导致只有最初创建的时间框应用了掩码。您还需要将其添加到页面加载后添加的每个输入中。您可以使用相同的 jQuery 调用，它只需要从单击处理程序以及在页面加载时调用。我建议将您的掩码初始化放在一个函数中，如下所示：

var count_2 = 5;

$(document).ready(function () {

    $('#btnAdd').click(function () {
        count_2 = count_2 + 2;
        $('#Table tr:last').after('<tr><td>' + 
            '<p class=\"null_temp\">' +
            '<input type=\"text\" name=\"temp' + count_2 + '\" id=\"temp' + count_2 + '\" placeholder=\"Time\" size=\"10\" maxlength=\"8\" value=\"\" class=\"total_time_regex\" />' +
            '</td></tr>');
        addMask();
    });

    function addMask() {
        $('.total_time_regex').inputmask('Regex', { 
            regex: "^([0-9]{1,4}:[0-5][0-9])$"
        });
    }
    addMask();
});

工作演示链接：https://jsfiddle.net/70kat20w/.

Answer 2

只需将inputmask 函数移动到btn 点击内即可。

var count_2 = 5;

$(document).ready(function () {

    $('#btnAdd').click(function () {
        count_2 = count_2 + 2;
        $('#Table tr:last').after('<tr><td>' + 
            '<p class=\"null_temp\">' +
            '<input type=\"text\" name=\"temp' + count_2 + '\" id=\"temp' + count_2 + '\" placeholder=\"Time\" size=\"10\" maxlength=\"8\" value=\"\" class=\"total_time_regex\" />' +
            '</td></tr>');

        $('.total_time_regex').inputmask('Regex', {             
            regex: "^([0-9]{1,4}:[0-5][0-9])$"
        });
    });


});

工作示例：https://jsfiddle.net/hnj6ed1y/42/