Jquery 莫代尔没有马上出现

我有一个表，每行有一个删除按钮。一旦按下删除按钮，就会出现一个模式，请求确认

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

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

查看：

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

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

Eliminar

塞拉
确认人

js文件：

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

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

函数callToModal（数据）{
$（'#myModal3.modal body p'）.html（“Desea eliminar al usuario”+''+数据+''+”？）；
$（'.confirm delete'）。在（'click'，函数（e）{
e、 预防默认值（）；
var id=$（this.data（'id'）；
$（'#myModal3'）.data（'id'，id.）.modal（'show'）；
});
$（'#btnYes'）。单击（函数（）{
//在这里处理删除
变量id=$（'#myModal3'）。数据（'id'）；
//警报（id）；
$.ajax({
url:“deleteFrontUser”，
键入：“POST”，
数据：“id=”+id，
成功：函数（html）{
//警报（html）；
$（'[data id='+id+']'）。父项（'tr'）.remove（）；
$（'#myModal3'）.modal（'hide'）；
}      
});
返回false；
});
};

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

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

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

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

---

在此之后，您可以从全局变量中获取id，并将其传递给ajax post。问题是，我调用了一个函数（单击一次），然后什么也没有触发。我改变了代码，现在它的工作超级！您可以在这里查看：

视图：

与我的问题中的相同，但只是将模态名称更改为“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;
});

$（'myModal'）。在（'show'，function（）上{
var id=$（this）.data（'id'），
用户名=$（this.data（'usern'）；
$（'myModal.modal body p'）.html（“Desea eliminar al-usuario”+''+用户名+''+''？”）；
})
$（'.confirm delete'）。在（'click'，函数（e）{
e、 预防默认值（）；
var id=$（this.data（'id'）；
var user=$（this.data（'title'）；
$（'#myModal'）.data（'id'，id.）.modal（'show'）；
$（'#myModal'）.data（'usern'，user.modal（'show'）；
});
$（'#btnYes'）。单击（函数（）{
变量id=$（'#myModal'）。数据（'id'）；
$.ajax({
url:“deleteFrontUser”，
键入：“POST”，
数据：“id=”+id，
成功：函数（html）{
$（'[data id='+id+']'）。父项（'tr'）.remove（）；
$（'#myModal'）.modal（'hide'）；
}      
});
返回false；
});

我还做了一件事，就是在html中添加了“data title”atribute，如下所示：

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

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

数据标题存储用户名，以便jquery以后可以跟踪它。请注意，我使用的是smarty模板引擎

---

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

你在使用什么jquery模式插件？@Bobby5193不知道，我怎么检查？我正在查看模板，但没有找到版本请参见如果您可以通过创建

引导层来重现问题，下面是一个示例，您的模式在第一次打开时应该立即显示出来。
id
第一次初始化的方式可能有问题，它抛出了一个无法打开模式的错误。如果你能在
bootply中演示这个问题，我可能会有所帮助。@Trevor嗨，我已经在用bootply编写代码了，多么神奇的工具啊。给你答案：谢谢。我找到了另一个解决方案，但我想你的也会奏效