javascript - 使用 .on 监听事件不起作用

Question

我正在尝试使用 .on 来监听事件。

html:

<div class="form-group" id="group_names">
   <label> Names: </label><br>
   <input type="text" class="form-control name" placeholder="name1" id="name1" name ="name1"><br>
</div>

JS：

for (n = 1; n < inputLength+3 ; ++n) {
     var test2 = document.getElementById(dude+n);
     $(test2).on('change', '#group_names', forFunction);
}

无法识别对输入字段的更改。

此外，我希望 .on 能够识别对我使用以下函数注入的新 html 所做的更改：

var dude = "name";

function forFunction() {
    for (m = 1; m < inputLength + 1; ++m) {
        var test = document.getElementById(dude + m)
        if (test.value != "") {
            var txt = "<input type=\"text\" class=\"form-control name\" placeholder=" + dude + (m + 1) + " id=" + dude + (m + 1) + " name=" + dude + (m + 1) + "><br>";

            document.getElementById('group_names').insertAdjacentHTML('beforeend', txt);
            //function updateHTML(txt)
        }
    }
}

我不确定我的 .on 语法是否正确。我正在尝试使用“#group_names”作为选择器，但不确定我是否做得对。

谢谢

Answer 1

考虑以下 jQuery 代码。

$(function() {
  var inputFields = $("input[id*='name']");

  function forFunction(evt) {
    console.log(evt.type);
    inputFields.each(function(i, el) {
      var n = i + 1;
      if ($(el).val() != "") {
        console.log("Value Detected");
        $("<input>", {
          type: "text",
          class: "form-control name",
          placeholder: "group" + n,
          id: "group" + n,
          name: "group" + n
        }).insertBefore("#group_names");
      }
    });
  }

  inputFields.on("change", forFunction);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="group_names">
  <label> Names: </label><br>
  <input type="text" class="form-control name" placeholder="name1" id="name1" name="name1"><br>
</div>

这应该适用于所有输入项。

Answer 2

您可能希望在父级上使用事件委托div。

$('#group_names').on('change', 'input.form-control.name', forFunction);