时间戳

首页 > 解决方案 > 将更改事件绑定到动态创建的 div

html - 将更改事件绑定到动态创建的 div

问题描述

我正在尝试在用户动态创建的另一个 div 中动态（通过输入）生成 div。问题是我能够动态生成两个 div，购买子 div 不会通过输入创建任何 div。

第二个 id="usersvmaddnewdivsN" 不会生成任何 div。你能帮我吗？谢谢你。

（检查 jsfiddle 以更好地理解）

https://jsfiddle.net/rqebwm59/3/

$(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);
    }
  });
});

$(function() {
  $("#usersvmaddnewdivsN").change(function() {
    var value = $(this).val();
    $(".usersvmaddnewdivsNContainer").empty();
    for (var i = 1; i < value; i++) {
      var block = $("<div>", {
        class: "block"
      });
      $(block).append($("div.usersvmaddnewdivsNSpecifics").html());
      $(".usersvmaddnewdivsNContainer").append(block);
    }
  });
});

<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' class="form-control" />
<div class="instancesNContainer"></div>
<div class='instancesNSpecifics'>
  <input type='number' min="1" oninput="validity.valid||(value='');" name='usersvmaddnewdivsN[]' id='usersvmaddnewdivsN' placeholder="Add new Users" class="form-control" />
</div>
<div class="usersvmaddnewdivsNContainer"></div>
<div class='usersvmaddnewdivsNSpecifics'>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" name='usernamevmN[]' id="usernamevmN" placeholder="VM-Username" />
    </div>

标签： htmleventsbinding

解决方案

我认为 jQuery事件委托是您正在寻找的。您可能希望将第二个“更改”绑定修改为：

$(".instancesNContainer").on('change', '.usersvmaddnewdivsN', function() { //etc.

.usersvmaddnewdivsN因此，在其静态父级内部动态创建的每个事件.instancesNContainer都会change自动绑定。

推荐阅读