Question

我在DOM中注入的元素不会触发甜警报。

我在rails 5应用程序中使用了甜蜜警报2 gem（https://github.com/nicolasblanco/sweet-alert2-rails），在我添加带有js响应的元素之前，它的效果很好。我知道我必须在添加元素后通过调用甜蜜警报事件侦听器来绑定它们，但我不知道如何。

在某处，宝石正在使用data-confirm属性将我的HTML元素上的甜蜜警报和绑定事件初始化为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>

将甜蜜警报绑定到动态添加的元素

1 个答案: