Question

我正在尝试使用以下代码动态添加/删除表单元素：

<form method="post" action="" id="form-step2" class="form-vertical">
   <fieldset>
      <legend>Inputs</legend>
      <div id="extender"></div>
      <p><a id="add_btn" href="#">Add</a></p>
    </fieldset>
</form>

$(function () {

//set a counter
var i = $('#form-step2 :input').length + 1;

//add input
$('a#add_btn').click(function () {
    $('<p><input type="text" name="items[]" id="' + i + '" value="' + i + '" />' +
        '<a class="dynamic-link" href="#step2">Remove</a></p>').fadeIn("slow").appendTo('#extender');
    i++;
    return false;
});


//fadeout selected item and remove
$(".dynamic-link").bind('click', function () {
    $(this).parent().fadeOut(300, function () {
        $(this).empty();
        return false;
    });
  });

});

添加了输入字段但无法删除。我究竟做错了什么？ http://jsfiddle.net/VTqhJ/

Answer 1

问题是，在将事件处理程序附加到它们时，“删除”链接不存在。您有两种方法可以解决此问题。您可以在将事件处理程序添加到DOM之后将其附加到每个“删除”链接，或者您可以使用“selector”参数使用.on。我从你的jsfiddle那里看到你试过这个，但是你做得不对。

应该是：

$("#form-step2").on('click', '.dynamic-link', function () {
    $(this).parent().fadeOut(300, function () {
        $(this).empty();
        return false;
    });
});

您需要在一个元素上调用.on()，该元素是所有“删除”链接的祖先（并且在调用.on()时存在）。然后设置“selector”参数以标识“删除”链接。

在.on()上调用$(document.body)函数总是安全的，但最好使用更近的祖先。我选择了表单元素。

Demo on jsfiddle

Answer 2

jsFiddle链接：http://jsfiddle.net/VTqhJ/5/

$(function () {

        //set a counter
        var i = $('.dynamic-input#form-step2').length + 1;
        alert(i);
        //add input
        $('a#add').click(function () {
            $('<p><input type="text" class="dynamic-input" name="items[]" id="' + i + '" value="' + i + '" />' +
                '<a href="#step2">Remove</a></p>').fadeIn("slow").appendTo('#extender');
            i++;

            $("a:contains('Remove')").click(function () {
              $(this).parent().css("display","none");
            });

            return false;
        });


        $("a:contains('Remove')").click(function () {
            alert('hi');
        });

        //fadeout selected item and remove
        $("#form-step2.dynamic-input").on('click', 'a', function () {
            $(this).parent().fadeOut(300, function () {
                $(this).empty();
                return false;
            });
        });

    });

Answer 3

您也可以使用this。它就像一个魅力！

但您只能添加有限的文本框。但我发现验证这些字段很困难所以我使用列表框输入值的方法。

动态添加/删除表单输入元素

3 个答案: