0

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

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

4

3 回答 3

1

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

它应该是：

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

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

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

jsfiddle 上的演示

于 2013-03-03T17:24:53.390 回答
1

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

    });
于 2013-03-03T18:27:37.337 回答
0

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

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

于 2013-03-03T17:13:25.693 回答