如何将引导模式绑定到使用引导表呈现的操作按钮

Question

我想使用由我添加到 Bootstrap Table 中的操作按钮触发的 Bootstrap modal，但我想不通。有没有办法将这些按钮的数据属性绑定到模态？在这种情况下它不起作用。或者如果我只能从 javascript 中做到这一点，我该怎么做，因为它在我的情况下也不起作用。两种方式都没有抛出错误。

这是一个屏幕截图，以明确我在说哪些按钮：每行上的编辑和删除按钮。

我正在使用的代码：

// Click handler for the edit button when I try the data attributes way
function operateFormatter(value, row, index) {
    return [
        '<a class="edit ml10" href="#dialogo-destinos" data-toggle="modal"  title="Edit">',
            '<i class="glyphicon glyphicon-edit"></i>',
        '</a>',
        '<a class="remove ml10" href="javascript:void(0)" title="Remove">',
            '<i class="glyphicon glyphicon-remove"></i>',
        '</a>'
    ].join('');
}
// Code for the javascript way:
window.operateEventsDestinos = {
    'click .edit': function (e, value, row, index) { 
        var $dialogo = $('.dialogo.destinos');
        ... // actions to populate the modal according to the row data
        $dialogo.modal('show');
        ...
    },
    'click .remove': function (e, value, row, index) {
        ...
    }
};

Bootstrap Table渲染的表格：

<div class="row">
    <div class="col-md-12">
        <table id="tabla-datos-destinos" class="bootstrap-table table table-striped table-hover"
                data-pagination="true" data-search="true" data-show-header="true"
                data-show-columns="true" data-show-refresh="true" data-toolbar="#custom-toolbar"
                data-show-toggle="true" data-show-export="true">
           <thead>
                <tr>
                    <th data-field="nombre" data-sortable="true">Nombre</th>
                    <th data-field="poblacion" data-sortable="true">Localidad</th>
                    <th data-field="provincia" data-sortable="true">Provincia</th>
                    <th data-field="operate" data-formatter="operateFormatter" data-events="operateEventsDestinos">Acciones</th>
                </tr>
           </thead>
        </table>
    </div>
</div>

当然还有模态的 HTML：

<div class="dialogo destinos modal fade" id="dialogo-destinos">
...
</div>

任何想法为什么这不起作用或我应该怎么做？

编辑：

我也尝试过使用按钮而不是 A 标记，但我也无法让它工作。相反，它运行默认行为：提交表单。有什么方法可以直接在表格的 HTML 中添加操作按钮，而不必通过 javascript 添加，我认为这就是绑定没有完成的原因？

Answer 1

您可以简单地将data-toggle 和data-target 绑定到acciones div 中的按钮。

例如：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#dialogo-destinos">
  Launch Modal
</button>