Tengo varios campos input con diferentes valores. Puedo editarlos pero no puedo estar vacío (si está vacío, muestra una alerta). Cuando lo estoy editando a nuevos valores, si el nuevo valor coincide con cualquiera de los otros valores input, se muestra un alert que no puede usar esto . Esto está funcionando bien aquí.

Pero la funcionalidad no funciona para agregar dinámicamente (botón Agregar) input.

¿Cómo aplicar la misma funcionalidad para elementos añadidos dinámicamente?

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="">");
});
1
Raviteja 10 dic. 2015 a las 13:49

3 respuestas

La mejor respuesta

Debe utilizar el mecanismo de delegación de eventos como se muestra a continuación para tratar con cuadros de entrada agregados dinámicamente:

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

Enlace de violín actualizado:

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

1
vijayP 10 dic. 2015 a las 10:52

Creo que puede ser útil.

$("#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" />
0
Shubham 10 dic. 2015 a las 11:01

Para elementos dinámicos agregados, debe agregar el oyente al padre como tal

$('#inputstack').on('blur','.selector', function () {
});
1
0Ds0 10 dic. 2015 a las 10:52