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

Question

我想将其添加到表中，但是当我单击添加按钮时，2 行正在同时添加，我的意思是循环运行两次。但是删除行没有问题。

$(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();
    });
});

HTML

<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="add_partners_details">Add</a>
    </div>
</div>

Answer 1

自从您使用 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>

演示：Plunker

Answer 2

我做了一些工作请检查

查询：

<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>

ASPX：

   <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"/>

它对我来说工作正常。现在您只需添加隐藏和显示删除和添加按钮的逻辑。当您使用动态控件时，您必须使用http://api.jquery.com/live/触发事件。请这样做，因为我有一些时间限制。

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

Answer 3

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