在我的表单中,我有一个称为Add Record
的href,当单击该href时,会将新的html元素行添加到表单中。添加的html元素行具有remove
和add
href。单击行尾的remove
后,该特定行将被删除...但是,当我单击子元素上的add
时,不会创建新行。>
$(document).ready(function(e) {
var html = '<div><label>Category:</label><select id="childcategory"><option value="0" selected>Select Category</option><option value="CatA">Category A</option><option value="CatB">Category B</option></select><a href="#" id="remove">Remove</a><a href="#" id="childAdd">AddRecord</a></div>';
var maxRows = 20;
var x = 1;
//Add rows
$("#add").click(function(e) {
if (x <= maxRows) {
$("#container").append(html);
x++;
}
})
/*//Add rows
$("#container").on('click', '#childAdd', function(e){
$(this).parent('div').add();
x++;
})
})*/
//Remove rows
$("#container").on('click', '#remove', function(e) {
$(this).parent('div').remove();
x--;
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div id="container" class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="main-content">
<div class="block">
<label>Category:</label>
<select id="category" name="category[]" required>
<option value="0" selected>Select Category</option>
<option value="ToiletSoap">Toilet Soap</option>
<option value="ToothPaste">ToothPaste</option>
</select>
<a href="#" id="add">Add record</a>
</div>
</div>
</div>
</div>
</div>
</form>
答案 0 :(得分:1)
您可以对add record
使用相同的功能,希望这是您预期的结果,如果没有请发表评论,我会更新
$(document).ready(function(e) {
var html = '<div><label>Category:</label><select id="childcategory"><option value="0" selected>Select Category</option><option value="CatA">Category A</option><option value="CatB">Category B</option></select><a href="#" id="remove">Remove</a><a href="#" id="childAdd">AddRecord</a></div>';
var maxRows = 20;
var x = 1;
//Add rows
$("form").on('click','#add, #childAdd', function(e) {
if (x <= maxRows) {
$("#container").append(html);
x++;
}
})
//Remove rows
$("#container").on('click', '#remove', function(e) {
$(this).parent('div').remove();
x--;
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div id="container" class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="main-content">
<div class="block">
<label>Category:</label>
<select id="category" name="category[]" required>
<option value="0" selected>Select Category</option>
<option value="ToiletSoap">Toilet Soap</option>
<option value="ToothPaste">ToothPaste</option>
</select>
<a href="#" id="add">Add record</a>
</div>
</div>
</div>
</div>
</div>
</form>
答案 1 :(得分:0)
在上面的代码中
var html = '<div><label>Category:</label><select id="childcategory"><option value="0" selected>Select Category</option><option value="CatA">Category A</option><option value="CatB">Category B</option></select><a href="#" id="remove">Remove</a><a href="#" id="childAdd">AddRecord</a></div>';
var maxRows = 20;
var x = 1;
//Add rows
$("#add").click(function(e) { //<--- Try using #childAdd instead of #add or change childAdd ID of href to add.
if (x <= maxRows) {
$("#container").append(html);
x++;
}
})
由于在HTML add
href中,您已将id用作childAdd
。
希望这会有所帮助。
答案 2 :(得分:0)
这不应该是其他DIV吗?
$("#container").append(html);
> $(“#main-content”)。append(html);
答案 3 :(得分:0)
append(html)
$(document).ready(function(e) {
var html = '<div><label>Category:</label><select id="childcategory"><option value="0" selected>Select Category</option><option value="CatA">Category A</option><option value="CatB">Category B</option></select><a href="#" class="remove">Remove</a><a href="#" class="childAdd">AddRecord</a></div>';
var maxRows = 20;
var x = 1;
//Add rows
$("#add").click(function(e) {
if (x <= maxRows) {
$("#container").append(html);
x++;
}
})
//Add rows
$("#container").on('click', '.childAdd', function(e){
$(this).parent('div').append(html);
console.log("child add")
x++;
})
//Remove rows
$("#container").on('click', '.remove', function(e) {
$(this).parent('div').remove();
x--;
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div id="container" class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="main-content">
<div class="block">
<label>Category:</label>
<select id="category" name="category[]" required>
<option value="0" selected>Select Category</option>
<option value="ToiletSoap">Toilet Soap</option>
<option value="ToothPaste">ToothPaste</option>
</select>
<a href="#" id="add">Add record</a>
</div>
</div>
</div>
</div>
</div>
</form>