Implementación de formToWizard de JQuery en formulario dinámico

[Gguer]

Hola

Así es. Estoy usando el plugin para JQuery, formToWizard, el cual divide los formularios en secciones de acuerdo a los fieldset existentes, mostrando una sección a la vez, con el fin de hacerle al usuario la navegación más cómoda.

Con la funcionalidad de este plugin no tengo problemas, todo va como debería. La cuestión es que mi formulario no tendrá secciones fijas, sino que a partir de las que ya tiene definidas el usuario podrá agregar más secciones. Esto es porque se realizan registros de jugadores y he querido que cada uno sea por separado. Al principio tendrá que registrar 5, como mínimo, pero puede extenderse hasta 10 máximo.

le doy la posibilidad al usuario de crear el nuevo grupo fieldset con los campos correspondientes. Esto lo hago con DOM (no sé si se pueda con JQuery, soy muuuy nuevo con este framework), pero cuando quiero llamar a la función que genera que el formulario se divida, efectivamente carga la nueva sección, pero hace un registro repetido, es decir, muestra las secciones dos veces.

Dos imágenes para aclarar esto:

Esta es la vista inicial, antes de hacer un nuevo registro


Aquí es cuando falla, porque los titulos de las secciones se crean dos veces


El código con el que llamo a esta función es el siguiente:

Código Javascript:

//Esto es al inicio del archivo que contiene el código de esta función 
$(document).ready(function(){
    $("#formNuevoJugador").formToWizard({ submitButton: 'guardarJugador' })
 
//Esto siguiente lo coloco al final de la función que genera el nuevo fieldset
 $("#formNuevoJugador").formToWizard({ submitButton: 'guardarJugador' }) 
});
 

Para ser sincero no conozco la sintaxis muy bien de JQuery, por lo que no sé cómo hacer para que únicamente cargue los fieldset añadidos, no todo el contenido del form por segunda vez.

Este es el código del plugin

Código Javascript:

/* Created by jankoatwarpspeed.com */
 
$(document).ready(function(){
    $("#formNuevoJugador").formToWizard({ submitButton: 'guardarJugador' })
});
(function($) {
    $.fn.formToWizard = function(options) {
        options = $.extend({  
            submitButton: "" 
        }, options); 
        
        var element = this;
 
        var secciones = $(element).find("fieldset");
        var count = secciones.size();
        var submmitButtonName = "#" + options.submitButton;
        $(submmitButtonName).hide();
 
        // 2
        $(element).before("<ul id='secciones'></ul>");
 
        secciones.each(function(i) {
            $(this).wrap("<div id='step" + i + "'></div>");
            $(this).append("<p id='step" + i + "commands'></p>");
 
            // 2
            var name = $(this).find("legend").html();
            $("#secciones").append("<li id='tituloSeccion" + i + "'>" + (i + 1) + "<span>" + name + "</span></li>");
 
            if (i == 0) {
                createNextButton(i);
                selectStep(i);
            }
            else if (i == count - 1) {
                $("#step" + i).hide();
                createPrevButton(i);
            }
            else {
                $("#step" + i).hide();
                createPrevButton(i);
                createNextButton(i);
            }
        });
 
        function createPrevButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Anterior</a>");
 
            $("#" + stepName + "Prev").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i - 1)).show();
                $(submmitButtonName).hide();
                selectStep(i - 1);
            });
        }
 
        function createNextButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Siguiente ></a>");
 
            $("#" + stepName + "Next").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i + 1)).show();
                if (i + 2 == count)
                    $(submmitButtonName).show();
                selectStep(i + 1);
            });
        }
 
        function selectStep(i) {
            $("#secciones li").removeClass("current");
            $("#tituloSeccion" + i).addClass("current");
        }
 
    }
})(jQuery);
 

Bueno espero haber sido claro y que alguien tenga alguna propuesta para esta cuestión, un saludo.