javascript - JS触发值检查更改和加载文档加载后添加到页面的元素

Question

这是怎么回事:

1. 用户点击按钮添加输入框
2. 当该输入字段更改为具有 > 0 的值时，将触发一个添加另一个输入字段的函数

代码在下面和 Fiddle 中运行良好:https://jsfiddle.net/9nf6r3xf/1/

$("#add").click(function(e) {
  e.preventDefault();
  $(".content").append(
    '<input class="input" type="number" min="0" />'
  )
})

$(document).on("change", ".input", function() {
  if ($(this).val() > 0) {
    $(".add-content").append(
      '<input class="input" type="text" value="test" />'
    )
  }
})

然而，额外的复杂性是我在某些情况下意识到的，用户将添加一个已经包含值的输入字段。在这种情况下，我仍然希望运行 change 函数，并添加第二个输入字段。换句话说，如果 click 函数像这样附加，我希望 change 函数运行:

 $(".content").append(
   '<input class="input" type="number" min="0" value="3"/>'
 )

我已经阅读了这些答案(jQuery on change and on load solution，How to get option value on change AND on page load?)，建议立即在我的更改函数上触发更改事件，如下所示:

$(".input").change(function(){
   if ($(this).val() > 0) {
     $(".add-content").append(
       '<input class="input" type="text" value="test" />'
     )
   }
}).change()

但是，该解决方案对我不起作用，因为 .input 本身是由 JS 按钮单击事件添加的，我需要将我的监听器添加到文档中，因此 $( document).on("change", ".input") 而不是 $(".input").change()

---

最终工作答案 fiddle :https://jsfiddle.net/9nf6r3xf/7/

采用选定的答案并进行修改以构建一些灵 active ，因为我最终会在多个领域使用它

Answer 1

我认为这应该像在动态添加的 input 上触发点击事件一样简单。在你附加它之后。

所以你现在拥有的是你的点击事件处理程序

$(".content").append( '<input class="input" type="number" min="0" />' )

在它后面加上这一行

$(".content > .input:last").trigger("change")

所以想法是找到类为input 的最后一个元素 通过使用 :last选择器(因为使用 append 添加的元素将在最后)并触发 click事件。