0

我在互联网上找到了一个插件并添加了一些新行来形成这个：

    (function($){

 $countForms = 1;
 $countFormsA = 1;

      $.fn.addForms = function(idform){

          var myform = "<table>"+
          "  <tr>"+
          "     <td>Field A ("+$countForms+"):</td>"+
          "     <td><input type='text' name='fielda["+$countForms+"]'></td>"+
          "     <td>Field B ("+$countForms+"):</td>"+
          "     <td><textarea name='fieldb["+$countForms+"]'></textarea></td>"+
          "     <td><button>remove</button></td>"+
          "  </tr>"+
          "</table>";

          var myform2 = "<table>"+
          "  <tr>"+
          "     <td>Field C</td>"+
          "     <td><input type='text' name='fieldc["+$countFormsA+"]'></td>"+
          "     <td>Field D ("+$countFormsA+"):</td>"+
          "     <td><textarea name='fieldd["+$countFormsA+"]'></textarea></td>"+
          "     <td><button>remove</button></td>"+
          "  </tr>"+
          "</table>";

    if(idform=='mybutton'){
       alert(idform);
       myform = $("<div>"+myform+"</div>");
$("button", $(myform)).click(function(){ $(this).parent().parent().remove(); });
$(this).append(myform);
$countForms++;
}
    else{

    if(idform=='mybutton1'){
       alert(idform);
    myform2 = $("<div>"+myform2+"</div>");
$("button", $(myform2)).click(function(){ $(this).parent().parent().remove(); });
    $(this).append(myform2);

    $countFormsA++;

                        }
                    }                     
      };

})(jQuery);         

 $(function(){
    $("#mybutton1").bind("click", function(){

    var idform=this.id;

        if($countFormsA<3){
            $("#container1").addForms(idform);
        }       
    });
});

$(function(){
    $("#mybutton").bind("click", function(){

    var idform=this.id;

        if($countForms<3){
            $("#container").addForms(idform);
        }       
    });
});

但是我遇到了问题。如果我单击“添加表单”一切正常，但是当我单击“添加表单 1”时，会添加新表单，但 1 秒后它会消失。任何提示我该如何解决这个问题？谢谢！

html代码：

<button id="mybutton">add form</button>
<div id="container"><div>
<form method="post" name="b" >
<table>
    <tr>
        <td>Field A</td>
        <td><input type='text' name='dadoA'></td>
        <td>Field B</td>
        <td><textarea name="dadoB"></textarea></td>
                             <td><button>remove</button></td>
                          </tr>
                         </table></div></div>

                         <div align="center">
<p><input type="submit" value="Registar" name="registar"></p>
</div>
<!-- -->

<button id="mybutton1">add form1</button>
<div id="container1"><div>
<form method="post" name="a" >
<table>
    <tr>
        <td>Field A</td>
        <td><input type='text' name='dadoA'></td>
        <td>Field B</td>
        <td><textarea name="dadoB"></textarea></td>
                             <td><button>remove</button></td>
                          </tr>
                         </table></div></div>

                         <div align="center">
<p><input type="submit" value="Registar1" name="registar1"></p>
</div>
4

1 回答 1

0

表单将消失，因为该按钮的默认行为正在刷新页面。

您需要在点击绑定中防止这种行为。我建议通过事件对象并使用preventDefault()ie：

$("#mybutton1").bind("click", function(e){
    e.preventDefault();
    var idform=this.id;

    if($countFormsA<3){
        $("#container1").addForms(idform);
    }       
});
于 2012-07-09T09:53:31.897 回答