添加data-inputmask属性后jQuery代码失效，动态追加输入框报错求助

嘿，我帮你排查出两个关键问题，这应该就是导致报错的核心原因：

1. JS字符串引号冲突触发语法错误 #

你写的append代码里，外层用单引号包裹HTML字符串，而data-inputmask属性值里又直接用了单引号（'alias': 'date'）——这会让JS解析器误以为字符串在这里提前结束，直接抛出语法错误。

修正后的代码（三种可选方案） #

方案1：转义内部单引号

$('#dynamic_field2').append('<input type="text" class="form-control pull-right datepicker" data-inputmask="\'alias\': \'date\'" name="reg_bdate" data-mask placeholder="Birth Date">');

方案2：换用双引号包裹外层字符串，内部用单引号（注意转义JSON里的双引号）

$('#dynamic_field2').append("<input type='text' class='form-control pull-right datepicker' data-inputmask='{\"alias\": \"date\"}' name='reg_bdate' data-mask placeholder='Birth Date'>");

方案3：用ES6模板字符串（最简洁，推荐）

$('#dynamic_field2').append(`<input type="text" class="form-control pull-right datepicker" data-inputmask='{"alias": "date"}' name="reg_bdate" data-mask placeholder="Birth Date">`);

2. 动态添加的元素需要手动初始化inputmask #

哪怕修复了引号问题，动态追加的输入框也不会自动生效——因为inputmask插件只会在页面加载时初始化已存在的DOM元素。所以追加完成后，必须手动触发初始化：

// 假设你的按钮点击事件绑定是这样的
$('#your-button-selector').on('click', function() {
  // 用模板字符串创建输入框
  const newDateInput = `<input type="text" class="form-control pull-right datepicker" data-inputmask='{"alias": "date"}' name="reg_bdate" data-mask placeholder="Birth Date">`;
  // 追加到目标容器
  $('#dynamic_field2').append(newDateInput);
  // 初始化新添加的输入框的inputmask
  $('#dynamic_field2').find('.datepicker:last').inputmask();
});

这样操作后，新的日期输入框就能正常使用inputmask的日期格式化功能了。

内容的提问来源于stack exchange，提问作者jacob Denis