动态创建div的change事件绑定失效问题求助

这个问题我太熟悉了——动态生成的DOM元素没法触发预先绑定的事件，核心原因是事件绑定的时机不对，加上你还踩了id重复的坑，我来给你一步步解决：

问题根源 #

你原来的代码里用$("#usersvmaddnewdivsN").change(...)直接绑定事件，这种方式只能给页面加载时就已经存在的元素绑定事件。而通过append动态生成的新输入框，在页面初始化时根本不存在，自然不会被绑定这个事件。另外，你动态生成的元素都用了同一个id，这违反了HTML规范（id必须唯一），也会导致后续选择元素时出问题。

解决方案：事件委托 + 替换id为class #

我们需要用jQuery的事件委托机制，把事件绑定到一个静态存在的父元素上（比如document或者更接近的容器），同时把重复的id换成class，避免冲突。

修改后的完整代码如下：

JavaScript部分

$(function() {
  // 一级实例生成逻辑
  $(".instancesN").change(function() {
    var value = $(this).val();
    $(".instancesNContainer").empty();
    for (var i = 1; i < value; i++) {
      var block = $("<div>", { class: "block" });
      $(block).append($("div.instancesNSpecifics").html());
      $(".instancesNContainer").prepend(block);
    }
  });
  
  // 二级用户框生成逻辑：使用事件委托
  $(document).on("change", ".usersvmaddnewdivsN", function() {
    var value = $(this).val();
    // 找到当前输入框所属的专属容器，避免干扰其他实例
    var targetContainer = $(this).closest(".block").find(".usersvmaddnewdivsNContainer");
    targetContainer.empty();
    
    for (var i = 1; i < value; i++) {
      var block = $("<div>", { class: "block" });
      $(block).append($("div.usersvmaddnewdivsNSpecifics").html());
      targetContainer.append(block);
    }
  });
});

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='number' min="1" oninput="validity.valid||(value='1');" value="1" name='instancesN[]' placeholder="Instances #" class='instancesN form-control' />
<div class="instancesNContainer"></div>

<!-- 一级实例模板：把二级容器放到模板里，每个实例都有自己的二级容器 -->
<div class='instancesNSpecifics'>
  <input type='number' min="1" oninput="validity.valid||(value='');" name='usersvmaddnewdivsN[]' class="usersvmaddnewdivsN form-control" placeholder="Add new Users" />
  <div class="usersvmaddnewdivsNContainer"></div>
</div>

<!-- 二级用户模板 -->
<div class='usersvmaddnewdivsNSpecifics'>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" name='usernamevmN[]' placeholder="VM-Username" />
    </div>
  </div>
</div>

关键改动说明 #

1. 事件委托：$(document).on("change", ".usersvmaddnewdivsN", ...) 把change事件绑定到document上，当事件从动态生成的元素冒泡到document时，会检查触发元素是否匹配.usersvmaddnewdivsN，这样不管元素什么时候生成，都能触发事件。
2. 移除重复id：把原来的id='usersvmaddnewdivsN'换成class='usersvmaddnewdivsN'，避免id冲突问题。
3. 容器隔离：把usersvmaddnewdivsNContainer放到一级实例模板里，这样每个生成的一级block都有自己独立的二级容器，不会出现所有实例共享一个容器的混乱情况。

这样修改后，不管你生成多少级div，对应的输入框都能正常触发生成子div的功能了。

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