如何在单击按钮时添加具有html形式的特定设计的文本框

Question

如何在单击按钮时添加具有html形式的特定设计的文本框

 $(document).ready(function() { var max_fields = 10; //maximum input boxes allowed var wrapper = $(".input_fields_wrap"); //Fields wrapper var add_button = $(".add"); //Add button ID var x = 1; //initlal text box count $(add_button).click(function(e) { //on add input button click e.preventDefault(); if (x < max_fields) { //max input box allowed x++; //text box increment $(wrapper).appendTo('<div class="fields_wrap">'); //add input box } }); $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text e.preventDefault(); $(this).parent('div').remove(); x--; }); }); <!-- begin snippet: js hide: false console: true babel: false -->

 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css" /> <link href="assets/css/consolidation.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <title></title> </head> <div class="fields_wrap row"> <div class="col-xs-3 col-lg-2 col-md-2"> <div class="new-input-label-a"> SELECT bankname </div> </div> <div id='dropdown' class="txt-input-dropdown col-xs-2 col-lg-2"> <select class="form-control" id="Select1" name="dropdown"> </select> </div> <div class="col-xs-3 col-md-2 col-lg-2"> <div class="new-input-label"> FOLIO NUMBERS </div> </div> <div class="txt-input col-xs-4 col-md-3 col-lg-3"> <textarea class="textarea form-control" rows="5" id="fno"></textarea> </div> <div class="add" id="addbtn"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i></div> <div class="row"> <div class="input_fields_wrap"> </div> </div>

我在div中有以text形式设计的类fields_wrap的文本框和textarea。

每当我单击addbutton，然后添加在div input_fields_wrap中包含文本框和文本区域的类fieldswrap。

但是，每当单击按钮添加时，我都无法在div中添加html表单的特定设计的div。

Answer 1

乍一看，我在您的代码中发现了3个问题

第一个div <div class="fields_wrap row">没有结束</div
add_button和wrapper已经是jquery对象，但是在事件中，您再次将它们包装在$ $(add_button).click(function(e) { 。我不知道这在jquery中是否是错误的语法，因为我从未尝试过:)
最重要的是：您的代码没有添加数量< max_fields 。 您实际上是一次又一次地添加一个框。 要添加多个框，您必须创建一个类别为input_fields_wrap的隐藏框，并使用.clone().show().appendTo('<div class="fields_wrap">').

如何在单击按钮时添加具有html形式的特定设计的文本框

问题描述

1 个解决方案

解决方案1
0 2017-04-10 08:39:39

如何在单击按钮时添加具有html形式的特定设计的文本框

问题描述

1 个解决方案

解决方案1 0 2017-04-10 08:39:39

解决方案1
0 2017-04-10 08:39:39