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

JS trigger value check on change AND on load for an element added to page after document load

本文关键字：加载 元素 AND 添加 触发器 检查 文档 JS      更新时间：2023-09-26

发生的是：

  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" />'
    )
  }
})

然而，我意识到，在某些情况下，用户会添加一个包含值的输入字段ALREADY。在这种情况下，我仍然希望运行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？），它们建议在我的change函数上立即触发一个change事件，如下所示：

$(".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/

选择了所选的答案，并进行了修改，以在中建立一些灵活性，因为我最终将在多个字段

上使用它

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

所以你现在在点击事件处理程序中有这个

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

在后添加此行

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

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

当元素被附加到与change事件具有相同处理程序的document时，您可以创建一个要调用的自定义事件；.trigger()调用附加到.content容器元素的:last .input元素上的"_change"自定义事件

$("#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>

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

相关文章：