Tengo un formulario de varios pasos con una barra de progreso, donde agregué una tabla editable, todo funciona bien excepto el botón "agregar fila", actualiza la página y pierdo todos los datos de la tabla, y la nueva fila no aparecer después de la recarga.

Cuando pruebo este código en un archivo html separado, funciona perfectamente, pero cuando lo inserto en el formulario de varios pasos, no funciona.

 $(".add-row").click(function(){ $("#editableTable").find("tbody").append("<tr><td data-field='name'></td><td data-field='name'></td><td data-field='name'></td><td data-field='name'></td><td><a class='button button-small edit' title='Edit'><i class='fa fa-pencil'></i></a> <a class='button button-small' title='Delete'><i class='fa fa-trash'></i></a></td></tr>"); });

 <div class="row"> <div class="col-md-12"> <br> <button class="btn btn-default pull-right add-row"><i class="fa fa-plus"></i>&nbsp;&nbsp; Add Row</button> </div> </div> <div class="row"> <div class="col-md-12"> <table class="table table-bordered" id="editableTable"> <thead> <tr> <th>Expected results</th> <th>Perimeter</th> <th>Quantity</th> <th>Price</th> <th>Edit</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div>