针对同一类成员的Jquery用于on (‘for )函数
针对同一类成员的Jquery用于on (‘for )函数
提问于 2021-06-14 01:31:31
我正在尝试使用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();
});回答 1
Stack Overflow用户
回答已采纳
发布于 2021-06-14 01:47:26
试着用这种方式锁定你新创建的手机元素，
$(document).on("input", ".phone", function() { ... })当DOM呈现时，您正在创建的元素不存在，因此您的事件处理程序将无法工作。直接查询文档将允许您对自发创建的元素使用事件处理程序。
这是一支带快速模型的钢笔。https://codepen.io/mujakovic/pen/QWpJabL
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67963868
复制相关文章
相似问题
腾讯云开发者
