使用jquery将行动态添加到表中不起作用

我想把它添加到一个表中，但是我点击add按钮，两行同时添加，我的意思是循环运行两次。但删除行没有问题

$(document).ready(function() {
    $(".add_partners_details").click(function() {
    var newrow = $('<div class="t-row"><div class="t-col"><input type="text" class="text_field txtNumeric" name="partners_or_directors_sl_no_id[]" value="" placeholder=""/></div><div class="t-col"><input type="text" class="text_field txtNumeric" name="partners_or_directors_pin_id[]" value="" placeholder=""/></div><div class="t-col end"><input type="text" class="text_field required txtAlphabet" name="partners_or_directors_name_id[]" value="" placeholder=""/></div><div class="t-col border_none"><a href="javascript:void(0);" class="remove_partners_details">Remove</a></div></div>');
        $("#details_of_partners_directors").append(newrow);
    });

    $("#details_of_partners_directors").on('click','.remove_partners_details',function() {
        $(this).parent().parent().remove();
    });
});

$（文档）.ready（函数（）{
$（“.add\u partners\u details”）。单击（函数（）{
var newrow=$（''）；
$（“合伙人和董事的详细信息”）。追加（纽罗）；
});
$（“合伙人/董事的详细信息”）。在（'单击'，'上。删除合伙人/董事的详细信息'，函数（）{
$（this.parent（）.parent（）.remove（）；
});
});

HTML

我怀疑发生这种情况是因为您正在使用一个类选择器，该选择器导致具有该类的每个元素触发click事件。尝试使用唯一的类名或id。

我看到的唯一问题是，由于您使用的是effect（），因此还需要包括jQuery UI库

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/jquery-ui.js"></script>

---

演示：

我做了一些工作，请检查

Jquery:

<script type="text/javascript">
    $(document).ready(function () {

        $(".add_partners_details").click(function () {
            var curindex = parseInt($("#hdn").val(), 10);
            if (curindex == 0) {
                curindex = 1;
            }
            else {
                curindex = curindex + 1;
            }

            var newDiv = '<div class="t-row" id= parentDiv' + curindex + '>' +
    '<div class="t-col">' +
                '<input type="text" class="text_field txtNumeric" name="partners_or_directors_sl_no_id[]"' +
            'value="" placeholder="" /></div>' +
    '<div class="t-col">' +
        '<input type="text" class="text_field txtNumeric" name="partners_or_directors_pin_id[]" value="" placeholder="" /></div>' +
    '<div class="t-col end" id="last">' +
        '<input type="text" class="text_field required txtAlphabet" name="partners_or_directors_name_id[]" value="" placeholder="" /></div>' +
    '<div class="t-col border_none">' +
        '<a href="javascript:void(0);" class="add_partners_details">Add</a>' +
        '<a href="javascript:void(0);" class="Remove_partners_details">Remove</a>' +
    '</div>' +
'</div>';
            var prediv = $('#hdnParent').val();
            $("#" + prediv).after(newDiv);
            $("#hdn").val(curindex);
            $('#hdnParent').val('parentDiv' + curindex);

        });

        $(".Remove_partners_details").click(function () {

            var curindex = parseInt($("#hdn").val(), 10);
            if (curindex != 0)
                $("#" + $('#hdnParent').val()).remove();
            if (curindex >= 1) {
                $("#" + curindex).remove();
                if (curindex == 1) {
                    curindex = 0;
                }
                else {
                    curindex = curindex - 1;
                }
                if (curindex == 0) {
                    $('#hdnParent').val('parentDiv');

                }
                else {
                    $('#hdnParent').val('parentDiv' + curindex);

                }
                $("#hdn").val(curindex);
            }

        });

    });
</script>

   <div class="t-row" id="parentDiv">
    <div class="t-col">
        <input type="text" class="text_field txtNumeric"   name="partners_or_directors_sl_no_id[]"
            value="" placeholder="" /></div>
    <div class="t-col">
        <input type="text" class="text_field txtNumeric" name="partners_or_directors_pin_id[]"
            value="" placeholder="" /></div>
    <div class="t-col end" id="last">
        <input type="text" class="text_field required txtAlphabet" name="partners_or_directors_name_id[]"
            value="" placeholder="" /></div>
    <div class="t-col border_none">
        <a href="javascript:void(0);" class="add_partners_details">Add</a>
        <a href="javascript:void(0);" class="Remove_partners_details">Remove</a>
    </div>
  </div>
  <input type="hidden" id="hdn" value="0"/>
 <input type="hidden" id="hdnParent" value="parentDiv"/>

$（文档）.ready（函数（）{
$（“.add\u partners\u details”）。单击（函数（）{
var curindex=parseInt（$（“#hdn”）.val（），10）；
如果（curindex==0）{
curindex=1；
}
否则{
curindex=curindex+1；
}
var newDiv=''+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'';
var prediv=$（'#hdnpart'）.val（）；
$（“#”+prediv）；
$（“hdn”）.val（curindex）；
$（'hdnpart'）.val（'parentDiv'+curindex）；
});
$（“.Remove\u partners\u details”）。单击（函数（）{
var curindex=parseInt（$（“#hdn”）.val（），10）；
if（curindex！=0）
$（“#”+$（“#hdnpart”）.val（））.remove（）；
如果（curindex>=1）{
$（“#”+curindex.remove（）；
if（curindex==1）{
curindex=0；
}
否则{
curindex=curindex-1；
}
如果（curindex==0）{
$（'hdnpart'）.val（'parentDiv'）；
}
否则{
$（'hdnpart'）.val（'parentDiv'+curindex）；
}
$（“hdn”）.val（curindex）；
}
});
});

ASPX:

<script type="text/javascript">
    $(document).ready(function () {

        $(".add_partners_details").click(function () {
            var curindex = parseInt($("#hdn").val(), 10);
            if (curindex == 0) {
                curindex = 1;
            }
            else {
                curindex = curindex + 1;
            }

            var newDiv = '<div class="t-row" id= parentDiv' + curindex + '>' +
    '<div class="t-col">' +
                '<input type="text" class="text_field txtNumeric" name="partners_or_directors_sl_no_id[]"' +
            'value="" placeholder="" /></div>' +
    '<div class="t-col">' +
        '<input type="text" class="text_field txtNumeric" name="partners_or_directors_pin_id[]" value="" placeholder="" /></div>' +
    '<div class="t-col end" id="last">' +
        '<input type="text" class="text_field required txtAlphabet" name="partners_or_directors_name_id[]" value="" placeholder="" /></div>' +
    '<div class="t-col border_none">' +
        '<a href="javascript:void(0);" class="add_partners_details">Add</a>' +
        '<a href="javascript:void(0);" class="Remove_partners_details">Remove</a>' +
    '</div>' +
'</div>';
            var prediv = $('#hdnParent').val();
            $("#" + prediv).after(newDiv);
            $("#hdn").val(curindex);
            $('#hdnParent').val('parentDiv' + curindex);

        });

        $(".Remove_partners_details").click(function () {

            var curindex = parseInt($("#hdn").val(), 10);
            if (curindex != 0)
                $("#" + $('#hdnParent').val()).remove();
            if (curindex >= 1) {
                $("#" + curindex).remove();
                if (curindex == 1) {
                    curindex = 0;
                }
                else {
                    curindex = curindex - 1;
                }
                if (curindex == 0) {
                    $('#hdnParent').val('parentDiv');

                }
                else {
                    $('#hdnParent').val('parentDiv' + curindex);

                }
                $("#hdn").val(curindex);
            }

        });

    });
</script>

   <div class="t-row" id="parentDiv">
    <div class="t-col">
        <input type="text" class="text_field txtNumeric"   name="partners_or_directors_sl_no_id[]"
            value="" placeholder="" /></div>
    <div class="t-col">
        <input type="text" class="text_field txtNumeric" name="partners_or_directors_pin_id[]"
            value="" placeholder="" /></div>
    <div class="t-col end" id="last">
        <input type="text" class="text_field required txtAlphabet" name="partners_or_directors_name_id[]"
            value="" placeholder="" /></div>
    <div class="t-col border_none">
        <a href="javascript:void(0);" class="add_partners_details">Add</a>
        <a href="javascript:void(0);" class="Remove_partners_details">Remove</a>
    </div>
  </div>
  <input type="hidden" id="hdn" value="0"/>
 <input type="hidden" id="hdnParent" value="parentDiv"/>

这对我来说很有效。现在您只需要为隐藏和显示删除和添加按钮添加逻辑。对于动态控件，必须使用触发事件。请这样做，因为我有时间限制

---

希望这将对您有所帮助。请更新以获得进一步帮助。

没有id为的元素

合作伙伴的详细信息\u董事

此小提琴可能重复。。。如果你不发布你的代码，请看“姓名”不是“身份证”。因此，您尝试访问未定义的DOM对象（尤其是未定义的ID）。为此设置JSFIDLE。这可能有助于@SupriyaSorry我已经包含了jquery文件，其中我编写了两次jquery代码。。所以循环运行了两次。。感谢所有回应的人.“合作伙伴和董事的详细信息”是表名.名称不是我知道的id。。但为了我们的身份，我们提供了类似“姓名\身份证”的信息。