javascript - 如何将 Bootstrap 模式绑定(bind)到使用 Bootstrap Table 呈现的操作按钮

Question

我想使用由添加到我的Bootstrap Table 中的操作按钮触发的Bootstrap 模态，但我无法弄清楚。有没有办法将这些按钮的数据属性绑定(bind)到模态？在这种情况下它不起作用。或者，如果我只能通过 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 添加它们，我认为这就是未完成绑定(bind)的原因？

Answer 1

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

例如:

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