1

Tengo un método que genera campos de texto dinamicamente con jQuey, este metodo se ejecuta cuando hago click sobre un enlace. Sin embargo quiero cambiar ese enlace por un botón, logré hacerlo pero y funciona, pero cada vez que presiono sobre el botón me agrega 2 campos, después 3 y así sucesivamente, no se a que se deba esto. ¿Como podría solucionar este comportamiento? Dejo mi código con el enlace y con el botón

Código con enlace

<html>

<head>
</head>

<body>
  <div class="field_wrapper">
    <div>
      <label>Nombre: </label>
      <input type="text" id="inputs" name="field_name[]" />
      <a href="javascript:void(0);" class="add_button">Agregar</a>

    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      var maxField = 10; //Limite de campos que se pueden agregar
      var addButton = $('.add_button'); //Selector del boton agregar
      var wrapper = $('.field_wrapper'); //Campo de entrada
      var fieldHTML = '<div id="dinamic"><input type="text" id="inputs" name="field_name[]" /><a href="javascript:void(0);" class="remove_button" title="Remove field">Eliminar</a></div>'; //Nuevo campo html
      var x = 1; //Contador inicial del campo es 1
      $(addButton).click(function() { //Cada vez que el boton agregar es presionado
        if (x < maxField) { //Revisa el numero maximo de camps
          x++; //Incrementa el contador
          $(wrapper).append(fieldHTML); //Agrega campo html
        }

        if (x == maxField) {
          alert('Ha alcanzado el maximo de campos que puede agregar');
        }

      });
      $(wrapper).on('click', '.remove_button', function(e) { //Cada vez que el boton eliminar es presionado
        e.preventDefault();
        $(this).parent('div').remove(); //Elimina el campo html
        x--; //Decrementa el contador
      });
    });
  </script>
</body>

</html>

Código con botón

<html>
  <head>
  </head>
  <body>
    <div class="field_wrapper">
      <div>
        <label>Nombre: </label>
        <input type="text" id="inputs" name="field_name[]" />
        <!-- <a href="javascript:void(0);" class="add_button">Agregar</a> -->
        <button class="add_button">Agregar</button>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">


      $(".add_button").on("click", function(){
        var maxField = 10; //Limite de campos que se pueden agregar
        var addButton = $('.add_button'); //Selector del boton agregar
        var wrapper = $('.field_wrapper'); //Campo de entrada
        var fieldHTML = '<div id="dinamic"><input type="text" id="inputs" name="field_name[]" /><a href="javascript:void(0);" class="remove_button" title="Remove field">Eliminar</a></div>'; //Nuevo campo html
        var x = 1; //Contador inicial del campo es 1
        $(addButton).click(function(){ //Cada vez que el boton agregar es presionado
          if(x < maxField){ //Revisa el numero maximo de camps
            x++; //Incrementa el contador
            $(wrapper).append(fieldHTML); //Agrega campo html
          }

          if(x == maxField){
            alert('Ha alcanzado el maximo de campos que puede agregar');
          }

        });
        $(wrapper).on('click', '.remove_button', function(e){ //Cada vez que el boton eliminar es presionado
          e.preventDefault();
          $(this).parent('div').remove(); //Elimina el campo html
          x--; //Decrementa el contador
        });
      });
    </script>
  </body>
</html>

Ambos códigos funcionan bien, pero código del botón me agrega campos de más, la idea es que agregue un solo campo cuando se presiona el botón

1 respuesta 1

2

El problema es que tienes dos handlers anidados escuchando al mismo evento. Solo necesitas escuchar una vez al evento click. Algo asi:

<html>
  <head>
  </head>
  <body>
    <div class="field_wrapper">
      <div>
        <label>Nombre: </label>
        <input type="text" id="inputs" name="field_name[]" />
        <!-- <a href="javascript:void(0);" class="add_button">Agregar</a> -->
        <button class="add_button">Agregar</button>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
      
        var maxField = 10; //Limite de campos que se pueden agregar        
        var addButton = $('.add_button'); //Selector del boton agregar
        var wrapper = $('.field_wrapper'); //Campo de entrada
        var fieldHTML = '<div id="dinamic"><input type="text" id="inputs" name="field_name[]" /><a href="javascript:void(0);" class="remove_button" title="Remove field">Eliminar</a></div>'; //Nuevo campo html
        var x = 1; //Contador inicial del campo es 1
        $(addButton).click(function(){ //Cada vez que el boton agregar es presionado
          if(x < maxField){ //Revisa el numero maximo de camps
            x++; //Incrementa el contador
            $(wrapper).append(fieldHTML); //Agrega campo html
          }

          if(x == maxField){
            alert('Ha alcanzado el maximo de campos que puede agregar');
          }

        });
        $(wrapper).on('click', '.remove_button', function(e){ //Cada vez que el boton eliminar es presionado
          e.preventDefault();
          $(this).parent('div').remove(); //Elimina el campo html
          x--; //Decrementa el contador
        });
     
    </script>
  </body>
</html>

2
  • Ya entiendo, más abajo mando a llamar otro método click y por eso se comporta así, es correcto?
    – Robert_Rmz
    el 23 may. 2019 a las 20:26
  • Estás en lo correcto. :D el 23 may. 2019 a las 20:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.