Question

当用户开始在列表中输入空输入时，我希望将新输入附加到列表中，以便添加下一个值。然后，如果他们输入新输入，则添加另一个新输入，依此类推。

我的代码是..

$('.addNew').on('input', function(){
    var $parentUl = $(this).closest('ul');
    if($(this).val().length === 0){
        $(this).removeClass('addNew');
        $parentUl.append('<li class="catsLi"><input type="text" class="catItem addNew" name="reason[]" value=""/></li>');
    }
});

这有效，但每次用户输入另一个字符而不是第一个字符时，它会添加一个新输入。我尝试过使用one代替on，但之后只会添加额外的输入，如果用户在新输入中输入没有任何结果。

考虑到这一点，我想我会在添加新输入之前检查输入是否为空，因此每次输入只执行一次，但它不起作用。

我可以从chrome检查中看到，当我输入输入时，它实际上并没有改变它的值，这就是为什么它总是添加一个新的输入所以我试过检查{{1}相反，但它仍然认为它是空的。

Answer 1

使用.one()将是一个不错的选择，您只需要确保您还添加一个侦听器到您追加的新输入字段。这是一个概念验证：

＆＃13;

// save a reference to the parent <ul> so we only have to look it up once
$parentUL = $('#parentUL');

function addNewField() {
  // create a new <li>
  var $newLI = $('<li class="catsLi"><input type="text" class="catItem" name="reason[]" value=""/></li>');

  // when the user first types in this new field, call addNewField() to add another "new" field to the list
  // (.one() ensures that the event will only fire once per field)
  $newLI.find('input').one('input', addNewField);

  // add the new <li> element to the end of the <ul>
  $parentUL.append($newLI);
}

// add a "new" field as soon as the page loads
addNewField();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="parentUL">
  <li class="catsLi"><input type="text" class="catItem" value="Existing One"/></li>  
  <li class="catsLi"><input type="text" class="catItem" value="Existing Two"/></li>  
</ul>

＆＃13;

Answer 2

根据上述评论

管理创建自己的解决方案

$('.posUl').on('input', '.addNew', function(){
    var $parentUl = $(this).closest('ul');
    var $entered = $(this).val().length;
    if($entered === 1){
        $parentUl.append('<li class="catsLi"><input type="text" class="catItem addNew" name="reason[]" value=""/></li>');
    }
});

通过检查$ input的值，我发现它在更改时从未显示为空（显然）然后将其绑定到ul意味着它在新输入上工作，这是一个动态元素

输入输入时的jQuery fire事件一次

2 个答案: