0

我有一张桌子，每一行都有一个删除按钮。按下删除按钮后，应显示一个模式以要求确认。

这里的问题是，第一次加载页面时，我必须单击两次（在我想要的删除按钮中）才能看到模式。一旦我这样做了，下次我按下任何行的任何删除按钮时，模态都会立即显示出来……只需单击一下。

我想知道为什么以及如何纠正它。

看法：

<!-- modal -->
  <div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h3 id="myModalLabel3">Eliminar</h3>
     </div>
     <div class="modal-body">
        <p></p>
     </div>
     <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
        <button data-dismiss="modal" class="btn red" id="btnYes">Confirmar</button>
     </div>
   </div>
   <!-- end modal -->

.js 文件：

function callToModal(data){
 $('#myModal3 .modal-body p').html("Desea eliminar al usuario " + '<b>' + data + '</b>' + ' ?');

  $('.confirm-delete').on('click', function(e) {
  e.preventDefault();
  var id = $(this).data('id');
  $('#myModal3').data('id', id).modal('show');
  });

  $('#btnYes').click(function() {
  // handle deletion here
  var id = $('#myModal3').data('id');
  // alert(id);
  $.ajax({
    url: "deleteFrontUser",
    type: 'POST',
    data: 'id='+id,
      success: function(html){
        // alert(html);
        $('[data-id='+id+']').parents('tr').remove();
        $('#myModal3').modal('hide');
      }      
    });
   return false;
  });
};
4

2 回答 2

1

问题是我正在调用一个函数（单击一次），然后什么也没触发。我更改了代码，现在它工作得很好！你可以在这里查看：

http://bootply.com/97366

看法：

与我的问题相同，但仅将模态名称更改为“myModal”。

.js文件：

$('#myModal').on('show', function() {
 var id = $(this).data('id'),
 username = $(this).data('usern');

 $('#myModal .modal-body p').html("Desea eliminar al usuario " + '<b>' + username + '</b>' + ' ?');
})

$('.confirm-delete').on('click', function(e) {
  e.preventDefault();

  var id = $(this).data('id');
  var user = $(this).data('title');

  $('#myModal').data('id', id).modal('show');
  $('#myModal').data('usern', user).modal('show');
});

$('#btnYes').click(function() {
var id = $('#myModal').data('id');

$.ajax({
  url: 'deleteFrontUser',
  type: 'POST',
  data: 'id='+id,
  success: function(html){

    $('[data-id='+id+']').parents('tr').remove();
    $('#myModal').modal('hide');
  }      
});
return false;
});

我还做的是在 html 中添加“data-title”属性，如下所示：

<td><a href="#" class="confirm-delete btn mini red-stripe" role="button" data-title="{$frontuser->username}" data-id="{$frontuser->id}">Eliminar {$frontuser->id} {$frontuser->username} </a></td>

data-title 存储用户名，以便 jquery 可以稍后获取它。请注意，我使用的是 smarty 模板引擎。

希望这可以帮助像我这样的新手:)

于 2013-11-28T18:26:30.773 回答
0

尝试将您传递到那里的 id（我想它是列表中用户的 id）保存到一个全局变量中，该变量将始终被您按下删除按钮的相应行的最后一个 id 覆盖。

然后你可以像这样调用模态：

 $('#myModal3').modal('show');

在此之后，您可以从全局变量中获取 id 并将其传递给 ajax post

于 2013-11-28T16:17:42.100 回答