Свяжите сладкое предупреждение динамически добавленным элементам

Question

Сладкое оповещение не запускается для элементов, которые я внедряю в DOM.

Я использую драгоценный камень sweet alert 2 (https://github.com/nicolasblanco/sweet-alert2-rails) в моем приложении rails 5, и он прекрасно работает, пока я не добавляю элементы с ответом js. Я понимаю, что мне нужно привязать слушателей события sweet alert, вызывая их после добавление элементов, но я не знаю как.

Где-то драгоценный камень инициализирует сладкие оповещения и привязывает события в моих HTML-элементах с атрибутом data-confirm, превращая их в data-sweet-alert-confirm. Думаю, мне придется вызывать эту функцию init после добавления новых элементов.

Answer 1

В файле просмотра:

<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css" rel="stylesheet" type="text/css">

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js"></script>

<div id="append_div" style="margin:20px;"></div>

<button id="add_element">Add Element</button>

В коде js:

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

        $(document).on('click', '#add_element', function(){                    
            $(document).find('#append_div').append( 
                '<button class="_appended_btn" style="margin:10px;">Open sweet alert</button>' 
            );
        });


        $(document).on('click', '._appended_btn', function(){
            Swal.fire({     
               type: 'success',
               title: 'Your work has been done',
               showConfirmButton: false,
               timer: 1500
            })
        });

    });
</script>