Question

我有多个具有不同值的input个字段。我可以编辑它们但不能为空（如果空显示警报）。当我将其编辑为新值时，如果新值与任何其他input值匹配，则显示您不能使用此的alert。这是有效的很好here。

但该功能不适用于动态添加（添加按钮）input。

如何为动态添加的元素应用相同的功能？

HTML

<div id="inputstack">
<input type="text" class="selector" value="new">
<input type="text" class="selector" value="old">
<input type="text" class="selector" value="newest">
<input type="text" class="selector" value="oldest">
<input type="text" class="selector" value="older">
</div>

<input type="button" value="Add" id="addinput" />

的JavaScript

$('.selector').on('blur',function () {
    var current_value = $(this).val();
  $(this).attr('value',current_value);
console.log(current_value);
    if ($('.selector[value="' + current_value + '"]').not($(this)).length > 0 || current_value.length == 0 ) {
      $(this).focus();
        alert('You cannot use this');
    }
});
$('#addinput').click(function(){
$('#inputstack').append("<input type="text" class="selector" value="">");
});

Answer 1

对于动态添加元素，您需要将侦听器添加到父级，因此

$('#inputstack').on('blur','.selector', function () {
});

Answer 2

您需要使用如下的事件委托机制来处理动态添加的输入框：

$(document).on('blur','.selector',function () {

更新了小提琴链接：

http://jsfiddle.net/0c0qep6y/21/

Answer 3

我认为它会有所帮助。

$("#addinput").click(function(){
  var obj = {};
  var i = 0;
  $(".selector").each(function(){
    if(this.value === "") {
      alert("value can't be empty");
    }else if(obj.hasOwnProperty(this.value)) {
      alert("there is a duplicate value " + this.value);
    } else {
      obj[this.value] = this.value;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputstack">
<input type="text" class="selector" value="">
<input type="text" class="selector" value="old">
<input type="text" class="selector" value="newest">
<input type="text" class="selector" value="oldest">
<input type="text" class="selector" value="older">
</div>

<input type="button" value="Add" id="addinput" />

如何提醒动态添加的输入框的重复值？

3 个答案: