提前举手。我是网络开发的新手,陷入了一个问题。我正在创建一个表单,其中我需要可变数量的输入字段。所以我尝试通过一些在线资源的帮助来创建动态输入字段。我已经尝试了我能想到的一切,但代码无效。
到目前为止,我已编写此代码: index.html
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>Dynamic Add Input Fields</header>
<form name="form1" id="form1">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" id="name" class="form-control name_list"/></td>
<td><input type="button" name="add" id="add" class="btn btn-success" value="ADD"></td>
</tr>
</table>
<input type="button" name="submit" id="submit" value="Submit"/>
</form>
<script type="text/javascript" >
$(document).ready(function () {
var i = 1;
$('#add').click(function () {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input id="name" type="text" name="name[]" class="form-control name_list"/></td><td><input type="button" name="remove" id="row'+i+'" class="btn_remove" Value="X" /></td></tr>');
});
$('.btn_remove').on('click','.btn_remove',function () {
var button_id = $(this).attr("id");
$("#row"+button_id+"").remove();
});
});
</script>
</body>
</html>
现在,当我运行此代码时,输出结果为:
动态添加输入字段 [输入字段] [添加按钮] [提交按钮]
因此,当我点击&#34;添加&#34;然后它应该添加一个输入字段和一个&#34;删除&#34;旁边的按钮。
但如果我点击&#34;添加&#34;按钮,没有任何反应,只是URL更改。
答案 0 :(得分:0)
您需要为每个新项添加事件处理程序
$('#dates').append(
$('<div class="'+classname+'">'+dd+'<br /><span class="month_selector">'+dm+'</span></div>')
.click(function(){
// handle click
})
);