我有输入元素，单击按钮时可以清除值。
此输入还可以动态添加或删除输入元素。
但我坚持添加输入元素后，清除按钮不起作用。
这是我到目前为止尝试过的
// ADD , Remove input
var counter = 1,
custom = $('#custom');
$(function() {
$('#add_field').click(function() {
counter += 1;
var newRow = $('<div class="row' + counter + '"><span class="wrap_input"><input id="exception_' + counter + '" name="" type="text"><button class="btn_clear">clear</button><button class="remove-text-box">Remove</button></span></div>');
custom.append(newRow);
(function(index) {
newRow.find('.remove-text-box').click(function() {
custom.find('.row' + index).remove();
});
})(counter);
});
});
// clear input value
$('.wrap_input').each(function() {
var $inp = $(this).find("input"),
$cle = $(this).find(".btn_clear");
$inp.on("input", function(){
$cle.toggle(!!this.value);
});
$cle.on("touchstart click", function(e) {
e.preventDefault();
$inp.val("").trigger("input").focus();
$inp.change();
});
});
.btn_clear { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add_field" href="#">add input</button>
<div id="custom">
<span class="wrap_input">
<input type="text" value="">
<button class="btn_clear">clear</button>
</span>
</div>
第一个输入工作正常，但添加输入元素后未出现清除按钮。
请帮忙。
Use .on如下所示。之后添加的元素不会与您需要的功能绑定。
更新功能
$(document).on("input", "input", function() {
$(this).next(".btn_clear").toggle(!!this.value);
});
$(document).on("touchstart click", ".btn_clear", function(e) {
e.preventDefault();
$(this).prev("input").val("").trigger("input").focus();
});
// ADD , Remove input
var counter = 1,
custom = $('#custom');
$(function() {
$('#add_field').click(function() {
counter += 1;
var newRow = $('<div class="row' + counter + '"><span class="wrap_input"><input id="exception_' + counter + '" name="" type="text"><button class="btn_clear">clear</button><button class="remove-text-box">Remove</button></span></div>');
custom.append(newRow);
(function(index) {
newRow.find('.remove-text-box').click(function() {
custom.find('.row' + index).remove();
});
})(counter);
});
});
// clear input value
$(document).on("input", "input", function() {
$(this).next(".btn_clear").toggle(!!this.value);
});
$(document).on("touchstart click", ".btn_clear", function(e) {
e.preventDefault();
$(this).prev("input").val("").trigger("input").focus();
});
.btn_clear {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add_field" href="#">add input</button>
<div id="custom">
<span class="wrap_input">
<input type="text" value="">
<button class="btn_clear">clear</button>
</span>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
