发生的是:
- 用户点击按钮添加输入字段
- 当该输入字段更改为值>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/