javascript - 如何使用 jQuery 添加重复的 div？

Question

当我用 jQuery 单击新按钮时，它会添加 div，但它只添加一个。当我从 DevTools 检查时，它不断创建相同的位置。但我希望它在那之后再添加一个。你能帮我吗？

HTML 代码

    <div class="text-left" style="margin-bottom: 15px;">
        <button type="button" class="add-extra-email-button btn btn-success" disabled><i class="fas fa-plus"></i></button>
    </div>

    <div class="clone"></div>

这里是示例 js 代码

    $('.add-extra-email-button').click(function() {
        var element = $('.clone');

        element.html(
            '<div class="clone_edilen_email">' +
                '<li>' +
                    '<a href="javascript:;"> Test' +
                    '<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>' +
                    '</a>' +
                '</li>' +
            '</div>'
        );

        $('.clone_edilen_email').addClass('single-email remove-email');
        $('.single-email').append('<div class="btn-delete-branch-email"><button class="remove-field-email btn btn-danger"><i class="fas fa-trash"></i></button></div>');
        $('.clone_edilen_email > .single-email').attr("class", "remove-email");
    });


    $(document).on('click', '.remove-field-email', function(e) {
        $(this).parent('.btn-delete-branch-email').parent('.remove-email').remove();
        e.preventDefault();
    });

Answer 1

如果我理解正确的话，你想添加<div class="clone_edilen_email">一次又一次，只要有人点击 .add-extra-email-button按钮。

一般情况下，调用 element.html('<some_wild_html></some_wild_html>')将始终覆盖 element 的完整内部内容与 <some_wild_html></some_wild_html> 。此外，如果该元素已经包含一些其他子元素，它们将会丢失。在您给定的代码示例中，我假设您的意图是扩展元素的 html 而不是替换它。

这是我的建议:

$('.add-extra-email-button').click(function() {
 var newDiv = $('<div class="clone_edilen_mail"></div>');
 newDiv.html('<li><a href="javascript:;"> Test<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i></li>');
 $('.clone').append(newDiv); // This is the important clue here!

 // afterwards you may insert your residual class stuff
 //  $('.clone_edilen_email').addClass('single-email remove-email'); <- I would suggest you add these classes already at the begining, where I set the variable "newDiv"
 // ...
 // $('.single-email').append('<div class="btn-delete-branch-email"><button class="remove-field-email btn btn-danger"><i class="fas fa-trash"></i></button></div>');
 // $('.clone_edilen_email > .single-email').attr("class", "remove-email");
});

// .. your other code may follow here ...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clone">I am a clone-div!</div>
<button class="add-extra-email-button">Click Me!</button>

希望这对您有帮助!