在动态添加/删除输入时清除输入值 [英] Clear input value on dynamically add/remove inputs

问题描述

我的输入元素可以在单击按钮时清除值. 同样，此输入可以动态添加或删除输入元素. 但是我坚持在添加输入元素后，清除按钮不起作用.

I have input element that can clear value when click the button. Also this input can be dynamically adding or remove input element. But I am stuck with when after add input element, the clear button is not working.

这是我到目前为止在这里尝试过的

This is what I tried so far here

// 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>

第一个输入运行良好，但添加输入元素后未出现清除按钮.

The first input is working well, but after adding input element clear button is not appeared.

请帮助.

推荐答案

使用.on，如下所示.之后添加的元素不会与您需要的功能绑定.

Use .on as shown below. The elements that are being added afterwards are not getting binded with the functions that you need.

更新功能

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

这篇关于在动态添加/删除输入时清除输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！