Question

我正在使用包含删除按钮的JQuery创建新的输入字段。删除按钮适用于原始元素，但不适用于使用JQuery创建的那些。

添加两个新电子邮件字段后的

文档

<fieldset>
                <legend>Send Email</legend>
                <label>Emails(s) to send notice to.</label>
                <p>
                    <input type="email" name="emails[]" style="cursor: auto; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;"><span class="btn_orange"><a href="#" class="remove_field">x</a></span>
                </p>
                <p><input type="email" name="emails[]"><span class="btn_orange"><a href="#" class="remove_field">x</a></span></p><p><input type="email" name="emails[]"><span class="btn_orange"><a href="#" class="remove_field">x</a></span></p><p>
                    <span class="btn_orange"><a class="add_email_button" href="#">Add Another Email</a></span>
                </p>
                <p>
                    <span class="btn_orange"><a class="ui-button">Send Email</a></span>
                </p>
            </fieldset>

脚本

<script type="text/javascript">
    $(document).ready(
        function () {
            $("#importbutton").click(function () {
                $("#ProgressBarImg").show();
                $.get('@Url.Action("Import", "Import")', {},
                function (data) {
                    $('body').html(data);
                    $('#ProgressBarImg').hide();
                });
                $("#importbutton").removeAttr("href");
            }
            );

            var dialog = $("#emailSection").dialog({
                autoOpen: false,
                height: 400,
                width: 475,
                modal: true
            });

            $('#emailButton').click(function () {
                $(dialog).dialog("open");
                $('#emailButton').removeAttr('href');
            });
            $('.add_email_button').closest('p').click(function () {
                var html = '<p><input type="email" name="emails[]" /><span class="btn_orange"><a href="#" class="remove_field">x</a></span></p>';
                $(html).insertBefore($(this));
            });

            $('a.remove_field').closest('p').click(function () {
                $(this).remove();
            });
        }
    );
</script>

Answer 1

您最初在页面上的元素上设置事件。添加新元素后，新元素没有处理程序，您可以添加它们，但这是最好的方式。

使用事件委派：http://jsfiddle.net/mendesjuan/4my1dhw1/

$(document).on('click', 'a.remove_field', function () {
    $(this).closest('p').remove();
});

这意味着您正在聆听整个文档的点击次数，但只会过滤您感兴趣的内容。

第二个好处是你不需要为每个元素单独的处理程序，节省你的记忆

我发布的代码与您的代码有所不同，因为它要求您点击x。当您点击<p>中的任意位置时，您的代码将被删除。我改变它的原因是因为没有CSS选择器模仿closest('p')所做的事情，那就是CSS选择器不会上升到树上。但是，我所拥有的内容似乎更有意义，而您可能只是using closest('p')因为您想要删除整个<p>，但您可以从处理程序内部执行此操作。

Answer 2

对于在页面加载后添加的元素，您应该使用：

 $('body').on('click', '.classSelector', function(e) {

});

使用Jquery单击时删除元素

2 个答案: