Question

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

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

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

查看：

<!-- 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;
  });
};

Answer 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可以稍后提取它。请注意我使用的是智能模板引擎。

希望这可以帮助像我这样的新手：）

Answer 2

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

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

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

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

莫代尔没有立即出现

2 个答案: