Невозможно вызвать модальные из 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( "click",".modal_trigger_confirm_action", function() { //logic here });

Answer 2

Пожалуйста, попробуйте это:

$( ".modal_trigger_confirm_action" ).on( "click", function() {
  // your logic here
});