无法从 jQuery DataTables 中触发模式

Posted 2023-05-09

【中文标题】无法从 jQuery DataTables 中触发模式

【英文标题】：Unable to trigger modal from within jQuery DataTables

【发布时间】：2019-09-17 16:47:18

【问题描述】：

我在页面的结束正文标记之前有一个通用模式。我使用 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
);

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

【参考方案1】：

因为按钮是动态生成的，而不是第一次加载时 DOM 的一部分，所以您需要触发点击动态生成的按钮，就像这样。

$(document).on( "click",".modal_trigger_confirm_action", function()  //logic here );

【讨论】：

你是救生员@Ravi！我自己永远也想不通。它就像一个魅力！

【参考方案2】：

请试试这个：

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

【讨论】：

我真的不知道使用.click()和.on("click")有什么区别，但是我做了，还是不行。

.on("click") 用于在从脚本创建元素时将事件处理程序与元素连接起来。在这里你可以试试我想让你试试这个：$(document).on('click', '.modal_trigger_confirm_action', function() // here your code. );

谢谢平图。这本来行得通，拉维的回答成功了。

我建议您只返回 json 数据而不是 html 并在前端解析它们。