jquery克隆div第一次

时间:2016-12-19 08:12:14

标签: javascript jquery html css

每次单击ADD按钮时,都有一个表单要克隆此表单。我的问题是:如何才能首次设置display none?当点击添加按钮设置显示块时,下一次只需克隆div?



$(document).ready(function(){
    $(".Add").click(function(){
	$(".formi").eq(0).clone().insertAfter(".formi:last");
	$(".cancel").click(function () {
    $(this).parents('.formi').remove();
      });
    });
});

.formi{border:1px solid #000;width:50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
    <form class="formi">
        <input type="text" placeholder="name" />
        <select name="cars">
          <option value="">one</option>
          <option value="">two</option>
        </select>
        <button type="submit">ok</button>
        <span class="cancel">Cancel</span>
    </form>
</div>    
&#13;
&#13;
&#13;

由于

5 个答案:

答案 0 :(得分:5)

您可以从CSS规则开始,即display:none;。插入元素时使用.show()

我还建议在动态生成元素时使用.on()方法实现Event Delegation方法。

&#13;
&#13;
$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi").eq(0).clone().show().insertAfter(".formi:last");
    
  });
  $('.all').on('click', ".cancel", function() {
      $(this).closest('.formi').remove();
    });
});
&#13;
.formi {
  border: 1px solid #000;
  width: 50%;
  display:none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" />
    <select name="cars">
      <option value="">one</option>
      <option value="">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

尝试隐藏/显示隐藏元素

$(document).ready(function() {
  $(".formi").hide(); //hide it at page ready you can use css for this
  $(".Add").click(function() {

    $(".formi").eq(0).clone().insertAfter(".formi:last").show(); //show it after you appended it 

  });
  $('.all').on('click', ".cancel", function() {
    $(this).parents('.formi').remove();
  });
});
.formi {
  border: 1px solid #000;
  width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" />
    <select name="cars">
      <option value="">one</option>
      <option value="">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>
委派您的取消点击事件并从第一个事件

中解开它

答案 2 :(得分:0)

我认为你可以在你的&#34;点击添加&#34;之前做这样的事情。 document.getElementsByClassName("youClass").style.display="none";

然后当你想再次显示它时你改变了display="theOneyouWant"(我想点击添加时)

答案 3 :(得分:0)

&#13;
&#13;
$(document).ready(function() {
  $(".Add").click(function() {
    $(".hide").removeClass("hide");//remove the class hiding the form
    $(".formi").eq(0).clone().insertAfter(".formi:last");
    $(".cancel").click(function() {
      $(this).parents('.formi').remove();
    });
  });
});
&#13;
.formi {
  border: 1px solid #000;
  width: 50%;
}
.hide {
  display:none
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi hide"> 
    <input type="text" placeholder="name" />
    <select name="cars">
      <option value="">one</option>
      <option value="">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>
&#13;
&#13;
&#13;

添加类隐藏,然后单击

将其删除

答案 4 :(得分:0)

单击添加类激活并以正常形式make display none

 form {
  display: none;
 }
 form.active {
   display: block;
 }