jQuery动态新增.numeric类元素 绑定keyup事件不生效

使用$(".numeric").keyup()、$("input[type=tel]").focus()这类直接绑定事件的写法，只会对代码执行时已经存在于DOM中的元素生效。后续通过createNewPic动态生成插入页面的元素，在事件绑定时还未渲染到DOM树，因此不会被绑定对应事件，触发时自然没有反应。

使用jQuery的事件委托机制，将事件绑定到始终存在的静态父元素上（优先选择离动态元素最近的静态父容器，比如承载动态行的表格tbody，性能优于绑定到document），通过选择器匹配触发事件的子元素，这样无论子元素是初始存在还是后续动态添加，都能响应事件。

修改后的完整代码如下：

// 数字输入框千分位格式化事件，替换原有直接绑定写法
$(document).on('keyup', '.numeric', function() {
  var num = $(this).val().match(/[0-9,]*/g)[0];
  var decimalNum = $(this).val().match(/[.][0-9]*/) || "";
  if (num) {
    var wholeNum = num.match(/[0-9]/g).reverse().join("").match(/[0-9]{1,3}/g).join(",").match(/./g).reverse().join("");
    var resultNum = wholeNum + decimalNum;
    $(this).val(resultNum);
  } else {
    $(this).val(num);
  }
});

$(document).ready(function() {
  // 电话输入框聚焦事件，替换原有直接绑定写法
  $(document).on('focus', 'input[type=tel]', function() {
    $(this).attr('placeholder', 'hello world');
  });
});

// 动态生成行的方法无需修改
let createNewPic = ({
  accounts,
  currencies,
  id
}) => {
  return `
                <tr id="trans-${id}">
                    <td class="table-input-box">
                         <select class="form-select form-select-sm account" name="trans[${id}][account_id]" required>
                            <option value=""></option>
                            ${
                                Object.keys(accounts).map(function (key) {
                                    const element = accounts[key];
                                    return `<option value="${element['id']}">
                                                                           ${element['first_name']} ${element['last_name']}
                                                                    </option>`
                                })
                            }
                        </select>
                    </td>
                    <td class="table-input-box">
                        <select class="form-select form-select-sm currency" name="trans[${id}][currency_id]" required>
                            <option value=""></option>
                            ${Object.keys(currencies).map(function (key) { const element = currencies[key];return `<option value="${element['id']}">${element['code']} | ${element['name']}</option>` })}
                        </select>
                    </td>
                    <td class="table-input-box">
                        <input type="tel" name="trans[${id}][debit]" class="form-control form-control-sm numeric">
                    </td>
                    
                    <td class="table-input-box">
                        <input type="tel" name="trans[${id}][credit]" class="form-control form-control-sm numeric"> 
                    </td>
                    <td class="table-input-box">
                        <textarea name="trans[${id}][description]" class="form-control form-control-sm" rows="1"></textarea>
                    </td>
                    <td class="table-input-box">
                        <label for="file" class="btn btn-secondary btn-sm">انتخاب</label>
                        <input type="file" class="form-control form-control-sm d-none" name="file" id="file">
                    </td>
                </tr>
            `
    }

注意事项 #

• 若已知动态行的固定父容器（例如id为trans-container的tbody/table元素），可将代码中$(document)替换为$('#trans-container')，缩短事件冒泡路径，性能更好。
• 不要在每次插入新行后重新全量绑定.numeric和input[type=tel]的事件，会导致已存在元素重复绑定事件，造成逻辑重复触发、内存占用升高的问题。

内容的提问来源于stack exchange，提问作者ALI JAMALI