Question

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

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

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

第一个输入工作正常，但是添加输入元素后，没有出现清除按钮。

请帮助。

Answer 1

使用.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>

Answer 2

尝试使用以下代码

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

        // call this method after row creation
        setTimeout(function() {
            clearInputValue();
        }, 0);
    });
});

// clear input value
function clearInputValue() {
    $('.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();
        });
    });
}

Answer 3

这是如何完成此操作的另一个示例。

    function add(){
      //Add
      $(".elements" )
        .append( "<div>\
        <input type='text' class='myinput'>\
        <button class='clear'>clear</button>\
        <button class='remove'>remove</button>\
        </div>" );
       
      init()
      
    }

    function init(){ 
      //Remove
      var x = document.getElementsByClassName('remove')
      for(var i = 0; i< x.length; i++){
          x[i].addEventListener("click", function(e){
            e.target.parentNode.remove()
          })
      }
      
      //Clear
      var y = document.getElementsByClassName('clear')
      for(var i = 0; i< y.length; i++){
          y[i].addEventListener("click", function(e){  
            e.target .parentNode.querySelector("input").value = ''; 
            //after clear hide .clear button 
            e.target.parentNode.querySelector(".clear").style.display = "none";
          })
      }
      
      //Show hide .clear button 
      var z = document.getElementsByClassName('myinput')
      for(var i = 0; i< z.length; i++){
         z[i].addEventListener("input", function(e){    
            if(e.target.value.length > 0){
              e.target.parentNode.querySelector(".clear").style.display = "inline";
            }else{
              e.target.parentNode.querySelector(".clear").style.display = "none";
            }
         })
      }
      
    }

    init();

  .clear{ 
      display:none;
    }

    <script src="https://code.jquery.com/jquery-1.6.4.js"></script>
    <div class="elements">
      <button id="add" onclick="add()">Add</button>
      <div>
        <input class="myinput">
        <button class="clear">clear</button>
      </div> 
     </div>

在动态添加/删除输入时清除输入值

3 个答案: