使用jquery添加字段

Adding fields using jquery

本文关键字：字段 添加 jquery 使用      更新时间：2023-09-26

我试图允许用户使用jquery在我的视图中添加和删除电子邮件字段。无论何时单击任一链接，都不会发生任何事情。

html/cshtml

<div id="emailSection">
  <ul>
    <li>Email(s) to send notice to.</li>
     <li><input type="email" name="emails[]" /><a href="#" class="remove_field">Remove</a></li>
     <li><a class="add_email_button ui-button" href="#" >Add Another Email</a></li>
  </ul>
</div>

js

<script type="text/javascript">
    $(document).ready(
        function() {
           ...
            $('.remove_field').on("click", function (e) {
                e.preventDefault();
                $(this).parent('li').remove();
            });
            $('.add_email_button').on('click', function (e) {
                e.preventDefault();
                $(this).insertBefore('<li><input type="email" name="emails[]" /><a href="#" class="remove_field">Remove</a></li>');
            });
        }
    );
</script>

这是小提琴

有几个小问题（添加新项的位置和删除的内容-错误的父项），但主要问题是应该为单击事件使用委托的事件处理程序。他们不在乎以后是否添加这些元素。

JSFiddle：http://jsfiddle.net/TrueBlueAussie/yj6ydbgp/3/

$(document).ready(
    function() {
        $('#emailSection').on('click', '.remove_field', function (e) {
            e.preventDefault();
            $(this).parent('li').remove();
        });
        $('.add_email_button').click(function (e) {
            e.preventDefault();
            $('<li><input type="email" name="emails[]" /><a href="#" class="remove_field">Remove</a></li>').insertBefore(this);
        });
    }
);

它们的工作方式是列出冒泡到一个不更改的祖先元素的事件（在本例中单击）（如果不方便，则默认为document），然后应用选择器，然后>将函数应用到导致事件的任何元素。在您的情况下，您可以使用$('#emailSection').on，因为它是最近的不变祖先。

这在大多数情况下也更有效，因为选择器只在事件时应用，并且只应用于它冒泡通过的元素链。在添加元素的地方，动态委托的事件处理程序是处理事件的最佳方式。

insertbefore必须以另一种方式使用：

$(/* What you need to insert */ ).insertBefore(/* Before what ?*/);

在你的情况下，你必须这样使用：

var html = '<li><input type="email" name="emails[]" /><a href="#" class="remove_field">Remove</a></li>';
$(html).insertBefore( $(this) );

适用于我：http://jsfiddle.net/yj6ydbgp/

---------[编辑]---------------

用于删除：

1/您需要在父级上创建一个事件，以选中所有新的删除按钮（否则创建后他们将不会获得点击事件）。

2/您不能删除<li>父，而不是<div>父级。

新建，正在为"添加和删除"工作http://jsfiddle.net/yj6ydbgp/1/

我知道这应该有效，这里有一些额外的信息：

$(document).ready(
    function() {
        $(document).on("click", '.remove_field' , function (e) {
            e.preventDefault();
            $(this).parent('li').remove();
        });
        $('.add_email_button').on('click', function (e) {
            e.preventDefault();
            var html = '<li><input type="email" name="emails[]" /><a href="#" class="remove_field">Remove</a></li>';
            $(html).insertBefore( $(this) );
        });
    }
);

注意删除的其他替代方案

$(this).closest('li').remove();

不，你知道什么时候该用什么。

closest（）http://api.jquery.com/closest/

parent（）http://api.jquery.com/parent/

相关文章：