Question

这是怎么回事：

用户点击按钮添加输入字段
当该输入字段更改为具有值> gt; 0，触发一个添加另一个输入字段的函数

代码可以正常工作，如下所示：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" />'
    )
  }
})

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

 $(".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")而不是{{} 1}}

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

选择了答案并进行了修改以建立一些灵活性，因为我最终会在多个字段上使用它

Answer 1

我认为这应该就像在追加动态添加input之后触发点击事件一样简单。

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

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

在此之后添加此行

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

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

Answer 2

您可以创建一个自定义事件，以便在将document附加到具有与change事件相同的处理程序的元素时进行调用; .trigger()在"_change"容器元素

附加的:last .input元素上调用.content自定义事件

$("#add").click(function(e) {
  e.preventDefault();
  $(".content").append(
    '<input class="input" type="number" min="0" />'
  )
})
// adjusted selector to `.input:last` to prevent
// handler being called for each `.input` element
$(document).on("change _change", ".input:last", function(e) {
  if ($(this).val() > 0) {
    $(".add-content").append(
      '<input class="input" type="text" value="test" />'
    )
  }
})

// add `.input` element to `.content` having `value` set to `3`, 
$(".content").append(
    '<input class="input" type="number" min="0" value="3"/>'
)
// trigger `"_change"` event on `.input:last`
.find(".input:last").trigger("_change")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<button id="add">
  Add
</button>
<span class="content">
</span>
<span class="add-content">
</span>

jsfiddle https://jsfiddle.net/9nf6r3xf/5/

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

2 个答案: