Question

这是我的代码 -

<div id="div1">

    this is div 1 

    <form class="thisformtobeaddeverytime">
    <!-- this form to be add on click #btn1 -->
    </form>

</div>

<div id="div2">

    this is div 2 

      <form class="thisformtobeaddeverytime">
             <!-- this form to be add on click #btn2 -->
      </form> 

</div>

<div id="showtheaddedform">

          //here my form will be push on click to button

</div>

<button type="button" id="btn1">Add the form1</button>
<button type="button" id="btn2">Add the form2</button>

// the click function in my js file are as -

$(document).on("click","#btn1",function(){
          $("#showtheaddedform").append($("#div1").html());
});
$(document).on("click","#btn2",function(){
          $("#showtheaddedform").append($("#div2").html()); 
 });

现在的问题是 -

点击#bun1，它将＃div1的内容添加到#showtheaddedform（即表单属性和表单内的所有元素），如

<div id="showtheaddedform">
      <form class="thisformtobeaddeverytime">
         <!-- this form to be add on click #btn1 -->
      </form>
</div>

但是当我点击＃btn2时，它只添加表单中的元素，例如

  <div id="showtheaddedform">
     <!-- this form to be add on click #btn2 -->
  </div>

[注意：我没有写任何类型的删除查询]

..任何想法，它是如何删除！

Answer 1

您的按钮都具有相同的ID。

中也存在语法错误

$(document).on("click","#btn1",function(){
      $("#showtheaddedform").append($("#div1").html());
 }

添加

); to it

DEMO

实际上，在第二个按钮的点击时，表格标签会附加到div。但是在UI中它不会显示，因为它没有任何标签或文本。尝试在其中提供一些文字或标签。它会起作用

修改

Updated Fiddle

Answer 2

您的第二个按钮似乎ID错误。

<button type="button" id="btn1">Add the form2</button>

更改为

<button type="button" id="btn2">Add the form2</button>

Answer 3

在java脚本代码中尝试以下代码，并将您的按钮ID更改为btn1和btn2

$(document).ready(function(){
//alert("hi");
$("#btn1").click( function()
{
    $("#showtheaddedform").empty();
    $("#showtheaddedform").append($("#div1").html());

});
$("#btn2").click( function()
{
    $("#showtheaddedform").empty();
    $("#showtheaddedform").append($("#div2").html());

});

}）;

在点击按钮时将div内容添加到另一个div中

3 个答案: