Как связать модальный Bootstrap к кнопкам действий, оказываемым с таблицей Bootstrap

Question

я хотел бы использовать Bootstrap режимного срабатывает с помощью кнопок действий я добавил к моей Bootstrap таблице, но я не могу понять , Есть ли способ привязать атрибуты данных этих кнопок к модальному? В этом случае он не работает. Или в случае, если я могу сделать это только с 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 таблице:

<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> 

Любые идеи, почему это не работает или что мне делать?

EDIT:

Я также попытался с помощью кнопки вместо тега, но я не могу заставить его работать либо. Вместо этого выполняется поведение по умолчанию: отправка формы. Есть ли способ добавить кнопки действий непосредственно в 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>