javascript - Jquery 针对 on ('input) 函数的同一类的成员

Question

我正在尝试使用 jquery 添加电话号码掩码。我在用户要求更多电话号码字段后添加的隐藏电话号码字段存在问题。

  $(".phone").on('input', function (e) {
    var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
    e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});

我不太确定为什么它不将 on 'input' 函数应用于同一类中的其余字段。

这是我的 HTML 的样子：

            <div class="form-group">
                <div>
                    <div class="input-group control-group after-add-more">
                        <input asp-for="PhoneNumber" type="text" name="addmore[]" id="phone" class="form-control k-textbox phone" placeholder="Enter Phone No.">
                        <div class="input-group-btn">
                            <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="copy hide">
                <div class="control-group input-group" style="margin-top:10px">
                    <input asp-for="PhoneNumber" type="text" name="addmore[]" id="phone" class="form-control k-textbox phone" placeholder="Enter Other Phone No.">
                    <div class="input-group-btn">
                        <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i></button>
                    </div>
                </div>
            </div>

这是完整的脚本，它有助于缩小范围：

$(".phone").on('input', function (e) {
    var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
    e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});

$(document).ready(function () {
    $(".add-more").click(function () {
        var html = $(".copy").html();
        $(".after-add-more").after(html);
        
    });
});
$("body").on("click", ".remove", function () {
    $(this).parents(".control-group").remove();
});

标签： javascriptjquery

Answer 1

尝试以这种方式定位您新创建的手机元素，

$(document).on("input", ".phone", function() { ... })

当 DOM 呈现时，您创建的元素不存在，因此您的事件处理程序将无法工作。直接查询文档将允许您在自发创建的元素上使用事件处理程序。

这是一支带有快速模型的笔。 https://codepen.io/mujakovic/pen/QWpJabL