Tengo tres botones de radio, la selección de cada uno de los botones cambia el contenido dentro del #show div. cuando la página carga el div contiene una forma dinámica y funciona perfectamente. después de seleccionar uno de los botones de radio y volver a la situación del formulario, el formulario dinámico no agrega más campos.

Soy un poco nuevo en JS y no puedo detectar el problema. Cualquier ayuda será genial.

No estoy seguro de cuál es el problema, por lo que se aceptará cualquier sugerencia para un mejor título de pregunta.

Esta es la función de campo dinámico

$(document).ready(function () {
        $("#addm").click(function () {
            var intIdm = $("#buildyourformm div").length + 1;
            var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field[]\" id=\"fieldm" + intIdm + "\"/>");
            var wfnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\field 1\"  name=\"inputwFname[]\" class=\"form-control\"></div>\" ");
            var wlnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\"field 2\"  name=\"inputwLname[]\" class=\"form-control\"></div>\" ");


            var removeButtonm = $("<input type=\"button\" class=\"remove-btn btn-warning\" value=\"remove\" />");
            removeButtonm.click(function () {
                $(this).parent().remove();
            });

            fieldWrapper.append(wfnamem);
            fieldWrapper.append(wlnamem);
            fieldWrapper.append(removeButtonm);
            $("#buildyourformm").append(fieldWrapper);
        });
    });

Este es un enlace a lo que ya he hecho

http://jsfiddle.net/davseveloff/ca7gvrkp/

0
DavSev 3 sep. 2014 a las 16:55

2 respuestas

La mejor respuesta

El problema era que no delegabas un controlador de clics en el botón Agregar, por lo que cuando manipulas el dom (eliminando los anexos), el enlace al identificador específico no funcionará porque eliminaste el elemento, también fusioné el controlador de clics en tu función de listo, no necesitas dos funciones listas

$(document).ready(function(){
        $('input[type=radio]').change(function(){
        var n = $(this).val();
        switch(n)
        {
                case '1':
                      $('#show').html('<fieldset id="buildyourformm"><div name="field1" id="field1"><div><input type="text" placeholder="field 1"  name="inputwFname[]"></div><div><input type="text" placeholder="field 2" name="inputwLname[]" class="form-control"></div><input type="button"  value="remove"></div></fieldset><input type="button" value="add" id="addm" /><br><br><br></div></div></div></fieldset>');
                      break;
                case '2':
                      $('#show').html("2nd radio button");
                      break;
                case '3':
                      $('#show').html("3rd radio button");
                      break;
            }
        });


            $("#show").on("click","#addm",function (event) {
                var intIdm = $("#buildyourformm div").length + 1;
                var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field[]\" id=\"fieldm" + intIdm + "\"/>");
                var wfnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\field 1\"  name=\"inputwFname[]\" class=\"form-control\"></div>\" ");
                var wlnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\"field 2\"  name=\"inputwLname[]\" class=\"form-control\"></div>\" ");


                var removeButtonm = $("<input type=\"button\" class=\"remove-btn btn-warning\" value=\"remove\" />");
                removeButtonm.click(function () {
                    $(this).parent().remove();
                });

                fieldWrapper.append(wfnamem);
                fieldWrapper.append(wlnamem);
                fieldWrapper.append(removeButtonm);
                $("#buildyourformm").append(fieldWrapper);
            });
    });

Tenga en cuenta que esto no funcionará con jquery 1.6, si realmente necesita usar esta versión anterior, cambie .on a .live

Heres un violín de trabajo

http://jsfiddle.net/ca7gvrkp/5/

0
john Smith 3 sep. 2014 a las 13:06

Esto se debe a que la primera vez que la función de documento listo está adjuntando los controladores de eventos a los botones de la interfaz de usuario, pero cuando selecciona otro botón de opción y vuelve al formulario nuevamente, aunque parece ser el mismo formulario, NO ES. Porque según su código, basado en el botón de radio, está renderizando los controles nuevamente. Pero esta vez, el documento listo no se ejecutará, ya que en realidad no es una actualización.

He modificado un poco tu código, mira este violín

$(document).ready(function(){
    $('input[type=radio]').change(function(){
    var n = $(this).val();
    switch(n)
    {
            case '1':
                  $('#show').html('<fieldset id="buildyourformm"><div name="field1" id="field1"><div><input type="text" placeholder="field 1"  name="inputwFname[]"></div><div><input type="text" placeholder="field 2" name="inputwLname[]" class="form-control"></div><input type="button"  value="remove"></div></fieldset><input type="button" value="add" id="addm" /><br><br><br></div></div></div></fieldset>');
                  tieEvents();
                  break;
            case '2':
                  $('#show').html("2nd radio button");
                  break;
            case '3':
                  $('#show').html("3rd radio button");
                  break;
        }
    });
});




$(document).ready(function () {
    tieEvents();
        });

function tieEvents() {
    $("#addm").click(function () {
            var intIdm = $("#buildyourformm div").length + 1;
            var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field[]\" id=\"fieldm" + intIdm + "\"/>");
            var wfnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\field 1\"  name=\"inputwFname[]\" class=\"form-control\"></div>\" ");
            var wlnamem = $("<div class=\"col-sm-5\"> <input type=\"text\" placeholder=\"field 2\"  name=\"inputwLname[]\" class=\"form-control\"></div>\" ");


            var removeButtonm = $("<input type=\"button\" class=\"remove-btn btn-warning\" value=\"remove\" />");
            removeButtonm.click(function () {
                $(this).parent().remove();
            });

            fieldWrapper.append(wfnamem);
            fieldWrapper.append(wlnamem);
            fieldWrapper.append(removeButtonm);
            $("#buildyourformm").append(fieldWrapper);
        });

}

http://jsfiddle.net/ca7gvrkp/6/

0
Thangadurai 3 sep. 2014 a las 13:09