无法从jQuery DataTables中触发模式

Question

我在页面的结束body标记之前有一个通用模式。我使用Javascript来显示单击按钮时的模式，并将按钮中嵌入的数据属性值传递给模式标题，正文和页脚。这使模态成为动态的。效果很好，但是，当我在jQuery DataTable中添加触发按钮时，它无法触发模式。

这是我的模态：

<div class="modal fade" id="modal_confirm_action" role="dialog">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title"></h5>

                <div class="pull-right m-l-15">

                    <button class="btn btn-danger btn-sm modal_close_btn" data-dismiss="modal" class="close" title="Close"> &times;</button>

                </div>

            </div><!--/.modal-header-->

            <div class="modal-body">

                <!--render data via JS-->

            </div>

            <div class="modal-footer">

                <a class="btn btn-sm btn-danger" role="button" id="action_url"> Yes, Continue </a>

                <button data-dismiss="modal" class="btn btn-sm btn-secondary"> No, Cancel </button>

            </div>

        </div>

    </div>

</div>

这是触发它的按钮：

<a class="btn btn-sm btn-danger text-white modal_trigger_confirm_action" data-title="Delete Post" data-msg="Sure to delete?" data-url="'.base_url('posts/delete_post/'.$id).'">Delete</a>

注意：我正在对DataTables（和CodeIgniter）使用服务器端处理，因此上面的按钮在我的控制器方法内部，并呈现在一列中，如下所示：

...

$row[] = '<a class="btn btn-sm btn-danger text-white modal_trigger_confirm_action" data-title="Delete Post" data-msg="Sure to delete?" data-url="'.base_url('posts/delete_post/'.$post_id).'">Delete</a>';

...

这是打开模式的JavaScript：

$('.modal_trigger_confirm_action').click(function() {

    //get data value params

    var title = $(this).data('title'); 

    var msg = $(this).data('msg'); 

    var url = $(this).data('url');

    $('#modal_confirm_action .modal-title').text(title); //dynamic title

    $('#modal_confirm_action .modal-body').html(msg); //dynamic body content

    $('#modal_confirm_action .modal-footer #action_url').attr('href', url); //url to delete item

    $('#modal_confirm_action').modal('show'); //show the modal

});

单击每行中的“删除”按钮不会执行任何操作。我究竟做错了什么？

Answer 1

由于该按钮是动态生成的，而不是第一次加载时DOM的一部分，因此您需要触发对该动态生成的按钮的单击，如下所示。$(document).on(&nbsp;"click",".modal_trigger_confirm_action",&nbsp;function()&nbsp;{&nbsp;//logic&nbsp;here&nbsp;});

Answer 2

请尝试以下方法：$( ".modal_trigger_confirm_action" ).on( "click", function() {&nbsp; // your logic here});