jquery click事件添加html标签后再次点击无反应

wulinzhijie 2015-06-08 08:16:35

想做一个追加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追加的部分再次点击“添加一条” 就没办法添加了，求大神指点

...全文

534 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

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>

jquery click事件 添加html标签后 再次点击无反应

jquery click事件添加html标签后再次点击无反应