0

我正在创建一个允许用户添加/删除文本字段的动态表单。虽然我可以毫无问题地添加文本字段，但我很难删除特定的文本字段。

每当我添加额外的文本字段（比如总共 5 个），并尝试删除除第一个之外的任何文本字段（比如删除字段 3）。所有这些都消失了，就像页面重新加载一样。就好像我的 jQuery 代码在按下“删除字段”时没有运行。

<form>
...
  <div id="answers">
    <div class="form-group" id="option1">
      <div class="col-xs-11 col-sm-9 col-md-6"> 
        <input class="form-control" id="answer" placeholder="Answer option">
      </div>
      <div class="col-xs-1 col-sm-1 col-md-1" style="line-height:36px;">
        <a href="" class="remove">Remove Field</span></a>
      </div>
    </div>
  </div>
...
</form>

 <div>
   <a href="" id="add">Add another field</a>
 </div>

jQuery

    <script>
        $(document).ready(function() {

            $( "#add" ).on( "click", function(event) {
                event.preventDefault();                 
                var options = $('#answers .form-group').length + 1;
                $( "#answers div:first" ).clone()
                    .attr('id', 'option' + options)
                .appendTo( "#answers" );

            });

            $( ".remove" ).on( "click", function(event) {
                event.preventDefault();                 
                $(this).closest(".form-group").remove();
            });


        });
    </script>
4

3 回答 3

3

而不是这个：

$( ".remove" ).on( "click", function(event) {

尝试这个：

$(document).on("click", ".remove", function(event) {
于 2013-09-16T21:25:06.853 回答
0

有了这个：

$(document).ready(function() {
 $( ".remove" ).on( "click", function(event) {
                event.preventDefault();                 
                $(this).closest(".form-group").remove();
            });
}

您正在将侦听器绑定到加载时页面上存在的“删除”项目上的单击事件。

在此之后添加的所有其他项目都将没有任何绑定的侦听器。

您应该使用3 参数侦听器来使用事件委托

$(document).ready(function() {
 $( "form" ).on( "click", ".remove" ,function(event) {
                event.preventDefault();                 
                $(this).closest(".form-group").remove();
            });
}

此声明的语义在于将事件绑定到完整表单（在加载时存在），但该事件将传播到单击的 .remove 锚点。

如果您使用的 jquery 版本早于 1.7，请使用委托

javascript 中事件的传播或冒泡允许这种行为。

于 2013-09-16T21:32:05.923 回答
0

尝试这个：

$( "body" ).on( "click", ".remove", function(event) {
      event.preventDefault();                 
      $(this).closest(".form-group").remove();
});

基本上你可以放置类的任何父类remove（不是动态生成的）而不是body.

于 2013-09-16T21:27:40.950 回答