使用 bootstrap 模态，显示，但突然隐藏

Question

嗯，我有一个 Jquery 数据 tables，其中一些按钮链接到模式（仅用于确认操作）。当我单击按钮时，模态框出现一秒钟或更短时间，然后突然消失。即使我不确认模态的动作，按钮的动作也已完成。所以，这个问题真的只是视觉上的。

我的 JS，我用按钮加载 table：

$(document).ready(function() {

  var miTabla = $('#miTabla').DataTable({
           'processing': true,
           'serverSide': true,
           'ajax': 'php/cargar-publi.php',
           'language': {
               'sProcessing': 'Procesando...',
               'sLengthMenu': 'Mostrar _MENU_ registros',
               'sZeroRecords': 'No se encontraron resultados',
               'sEmptyTable': 'Ningún dato disponible en esta tabla',
               'sInfo': 'Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros',
               'sInfoEmpty': 'Mostrando registros del 0 al 0 de un total de 0 registros',
               'sInfoFiltered': '(filtrado de un total de _MAX_ registros)',
               'sInfoPostFix': '',
               'sSearch': 'Buscar:',
               'sUrl': '',
               'sInfoThousands': ',',
               'sLoadingRecords': 'Cargando...',
               'oPaginate': {
                   'sFirst': 'Primero',
                   'sLast': 'Último',
                   'sNext': 'Siguiente',
                   'sPrevious': 'Anterior'
               },
               'oAria': {
                   'sSortAscending': ': Activar para ordenar la columna de manera ascendente',
                   'sSortDescending': ': Activar para ordenar la columna de manera descendente'
               }
           },
           'columns': [
           {
               'data': 'IdContenido', "visible" : false
           }, {
               'data': 'titulo'
           },{
               'data': 'tipo'
           },{
               'data': 'fecha_inicio'
           },{
               'data': 'fecha_modificacion'
           },{
               'data': 'contenido', "visible" : false
           },{
               'data': 'precio'
           },{
               'data': 'estado'
           },{
               'data': 'url' , "visible" : false
           },{
               'data': 'rangoLongitud'
           },{
               'data': 'palabraClave'
           },{
               'data': 'cliente'
           },{
               'data': 'medio'
           }, {
               'data': 'editor'
           },  {
               'data': 'IdContenido',
               /*añadimos las clases editarbtn y borrarbtn para procesar los eventos click de los botones. No lo hacemos mediante id ya que habrá más de un
               botón de edición o borrado*/
               'render': function(data) {
                   return '<a data-toggle="modal" data-target="#basicModal"  class="btn btn-danger btn-xs borrarbtn glyphicon glyphicon-remove" href=php/borrar_articulo.php?id_contenido=' + data + '>Borrar</a>';
               }
           }]
       });

我的 JS，我的按钮事件是 class borrarbtn:

$('#miTabla').on('click', '.borrarbtn', function(e) {

                    var nRow = $(this).parents('tr')[0];
           var aData = miTabla.row(nRow).data();
           IdContenido = aData.IdContenido;


       });

最后是我的模态函数：

 $('#basicModal').on('click','#confBorrar',function(e){


           $.ajax({

               type: 'POST',
               dataType: 'json',
               url: 'php/borrar_articulo.php',
               data: {
                   idContenido: IdContenido
               },
               error: function(xhr, status, error) {
                   var $mitabla =  $("#miTabla").dataTable( { bRetrieve : true } );
                  $mitabla.fnDraw();

               },
               success: function(data) {

                   var $mitabla =  $("#miTabla").dataTable( { bRetrieve : true } );
                  $mitabla.fnDraw();


               },
               complete: {

               }
           });
        $('#tabla').fadeIn(100);
       });

所以，问题是永远不会到达模态，但是 ajax 调用它做得很好。

我的html模态：

<div class="modal fade" id="basicModal" name="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

            <h4 class="modal-title" id="myModalLabel">Borrar articulo</h4>
            </div>
            <div class="modal-body">
                <h3>¿Desea borrar el articulo?</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                <button type="button" type="submit" id="confBorrar" name="confBorrar" data-dismiss="modal" class="btn btn-primary aceptarBorrado">Si</button>
        </div>

    </div>
  </div>
</div>

我真的看不出这是什么问题。感谢您的回答

Answer 1

试试这个：

    $('#basicModal').on('click','#confBorrar',function(e){

              event.preventDefault();

               $.ajax({

                   type: 'POST',
                   dataType: 'json',
                   url: 'php/borrar_articulo.php',
                   data: {
                       idContenido: IdContenido
                   },
                   error: function(xhr, status, error) {
                       var $mitabla =  $("#miTabla").dataTable( { bRetrieve : true } );
                      $mitabla.fnDraw();

                   },
                   success: function(data) {

                       var $mitabla =  $("#miTabla").dataTable( { bRetrieve : true } );
                      $mitabla.fnDraw();


                   },
                   complete: {

                   }
               });
            $('#tabla').fadeIn(100);
           });

使用 bootstrap 模态，显示，但突然隐藏

Using bootstrap modal, its shown, but suddenly it hides

html

ajax

jquery

twitter-bootstrap

bootstrap-modal