Как добавить повторяющийся div с jQuery? - PullRequest
Новая
       12

Как добавить повторяющийся div с jQuery?

0 голосов
/ 07 ноября 2019

Когда я нажимаю на новую кнопку с помощью 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();
    });

Ответы [ 3 ]

2 голосов
/ 07 ноября 2019

Если я правильно понимаю, вы хотите добавлять <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>

Надеюсь, что это может помочь вам!

0 голосов
/ 07 ноября 2019

Попробуйте этот метод, добавьте дубликаты элементов и содержимого с помощью метода jQuery .clone () 

<!doctype html>
<html>
<head>
    <title>jQuery Clone() – Add Elements and its Contents</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <style>
        div {
            margin:3px;
            padding:3px;
            border:solid 1px #999;
            width:300px;
        }
    </style>
</head>

<body>
    <p>Click the button to clone (make a duplicate) of the DIV element!</p>

    <div id="Container">Hello, how was your day!</div>
    <p><input type="button" id="Button1" value="Clone it" /></p>
    
</body>

<script>
    $(document).ready(function () {
        $('#Button1').on('click', function () {
            $('#Container')
                .clone()
                .appendTo("body");
        });
    });
</script>
</html>
0 голосов
/ 07 ноября 2019

В функции первого клика вы заменяете все содержимое вашего div-клона, поэтому даже если вы нажмете еще раз, у вас будет только один. Он просто заменяет старый.

Я не понял, что вы пытаетесь сделать с помощью функции второго щелчка.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...