87,987
社区成员
发帖
与我相关
我的任务
分享jquery click事件 添加html标签后 再次点击无反应
想做一个追加input框的功能，代码如下
html代码：
<div class='xhdz'><input type='text' name='xhmc[]' style='width:100px;margin-right:10px;' value='' /><input type='text' name='xhdz[]' class='intxt' value='' /><a href='javascript:void(0)' id='addone'>添加一条</a></div>
js代码：
$(document).ready(function(){
$('#addone').on('click', function(){
var str = "<div class='xhdz'><input type='text' name='xhmc[]' style='width:100px;margin-right:10px;' value='' /><input type='text' name='xhdz[]' class='intxt' value='' /><a href='javascript:void(0)' id='addone'>添加一条</a><a href='javascript:void(0)' class='delone''>删除</a></div>";
$(this).parent().after(str);
$('.delone').click(function(){
$(this).parent().remove();
});
});
});
点击html代码部分的“添加一条”可以添加，但是jquery追加的部分再次点击“添加一条” 就没办法添加了，求大神指点
html代码：
<div class='xhdz'><input type='text' name='xhmc[]' style='width:100px;margin-right:10px;' value='' /><input type='text' name='xhdz[]' class='intxt' value='' /><a href='javascript:void(0)' id='addone'>添加一条</a></div>
js代码：
$(document).ready(function(){
$('#addone').on('click', function(){
var str = "<div class='xhdz'><input type='text' name='xhmc[]' style='width:100px;margin-right:10px;' value='' /><input type='text' name='xhdz[]' class='intxt' value='' /><a href='javascript:void(0)' id='addone'>添加一条</a><a href='javascript:void(0)' class='delone''>删除</a></div>";
$(this).parent().after(str);
$('.delone').click(function(){
$(this).parent().remove();
});
});
});
点击html代码部分的“添加一条”可以添加，但是jquery追加的部分再次点击“添加一条” 就没办法添加了，求大神指点
...全文
请发表友善的回复…
发表回复
Braska 2015-06-09
- 打赏
- 举报
id不要重复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
</style>
<script>
$(document).ready(function(){
$(document).on('click','.addone', function(){
var str = "<div class='xhdz'><input type='text' name='xhmc[]' style='width:100px;margin-right:10px;' value='' /><input type='text' name='xhdz[]' class='intxt' value='' /><a href='javascript:void(0)' class='addone'>添加一条</a><a href='javascript:void(0)' class='delone''>删除</a></div>";
$(this).parent().after(str);
$('.delone').click(function(){
$(this).parent().remove();
});
});
});
</script>
</head>
<body>
<div class='xhdz'><input type='text' name='xhmc[]' style='width:100px;margin-right:10px;' value='' /><input type='text' name='xhdz[]' class='intxt' value='' /><a href='javascript:void(0)' class='addone'>添加一条</a></div>
</body>
</html>
scscms太阳光 2015-06-09
- 打赏
- 举报
$('.delone').on("click",function(){
$(this).parent().remove();
});
遥望那些年 2015-06-08
- 打赏
- 举报
<!DOCTYPE html>
<script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superplus/js/lib/jquery-1.10.2_d88366fd.js"></script>
<script>
$(document).ready(function () {
var addoneAction = function () {
var str = "<div class='xhdz'><input type='text' name='xhmc[]' style='width:100px;margin-right:10px;' value='' /><input type='text' name='xhdz[]' class='intxt' value='' /><a href='javascript:void(0)' class='addone'>添加一条</a><a href='javascript:void(0)' class='delone''>删除</a></div>";
$(this).parent().after(str);
$('.addone').unbind('click').bind('click', addoneAction);
$('.delone').unbind('click').bind('click', deloneAction);
};
var deloneAction = function () {
$(this).parent().remove();
};
$('.addone').unbind('click').bind('click', addoneAction);
});
</script>
<html lang="en">
<head>
<title>HTML</title>
</head>
<body>
<div class='xhdz'>
<input type='text' name='xhmc[]' style='width: 100px; margin-right: 10px;' value='' /><input
type='text' name='xhdz[]' class='intxt' value='' /><a href='javascript:void(0)' class='addone'>添加一条</a></div>
</body>
</html>
