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()。

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

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