twitter bootstrap模式在第一次调用时不起作用

我正在使用twitter bootsrap练习并制作了一个示例网站。 我使用模态视图在用户投票时显示警告。 但是，当您第一次投票时，它不会显示警告。 它显示第二次。 如果你去我的测试网站并点击向上箭头，你将看不到任何内容。 但当你再次点击时，你会看到模态消息。（这就是说你必须用我的语言记录投票）我无法弄清楚它为什么会发生。 谢谢你的帮助。

这是我的jquery。

 jQuery(document).ready(function($){ $('.upvote').click( function(event) { event.preventDefault(); var voteID = $(this).attr("id"); $.ajax({ url: "/ajax.php?Page=votetitle", type: "post", dataType: "json", data: {id : voteID, vote: '1'}, success: function(data){ if(data.success == 'true'){ $('#voteresponse'+voteID).html(data.message); }else{ $(".upvote").attr("data-toggle", "modal"); $(".upvote").attr("data-target", "#modal"); $('#modal').modal('show'); $('#modal').on('show', function () { $('.ModalLabel',this).html('Oy verirken hata oluştu!').css({color: 'red'});; $('.modal-body',this).html(data.message); }); } }, error:function(){ $('#voteresponse').popover({ title: 'Hata!', content: 'Server hatasi' }); } }); }); $('.downvote').click( function(event) { event.preventDefault(); var voteID = $(this).attr("id"); $.ajax({ url: "/ajax.php?Page=votetitle", type: "post", dataType: "json", data: {id : voteID, vote: '2'}, success: function(data){ if(data.success == 'true'){ $('#voteresponse'+voteID).html(data.message); }else{ $(".downvote").attr("data-toggle", "modal"); $(".downvote").attr("data-target", "#modal"); $('#modal').modal('show'); $('#modal').on('show', function () { $('.ModalLabel',this).html('Oy verirken hata oluştu!').css({color: 'red'});; $('.modal-body',this).html(data.message); }); } }, error:function(){ $('#voteresponse').popover({ title: 'Hata!', content: 'Server hatasi' }); } }); }); });  

模态html

  
 
 × 
 
 
 
 
 Kapat 
  

和按钮

  '.intval( $data['TotalVotes'] - $data['VoteSum'] ).'  

Answer 1

因为这些按钮在单击之前甚至没有data-toggle =“modal”属性。 所以按钮只在第一次点击后获得该属性，并且可以在第二次点击时调用模态。

您可以尝试删除这两行：

  $(".downvote").attr("data-toggle", "modal"); $(".downvote").attr("data-target", "#modal"); 

而只是从你的JavaScript调用模态：

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

确保你把它放在$（’＃modal’）之后。（’show – function..so像这样：

 $('#modal').on('show', function () { $('.ModalLabel',this).html('Oy verirken hata oluştu!').css({color: 'red'});; $('.modal-body',this).html(data.message); }); $('#modal').modal('show'); 

正如Tallmaris在评论中所建议的那样，将事件监听器放在点击处理程序中并不是最好的解决方案，除了我认为你甚至不需要那个监听器，所以做这样的事情 – 改变这个：

 $('#modal').on('show', function () { $('.ModalLabel',this).html('Oy verirken hata oluştu!').css({color: 'red'});; $('.modal-body',this).html(data.message); }); $('#modal').modal('show'); 

进入这个：

 $('.ModalLabel').html('Oy verirken hata oluştu!').css({color: 'red'});; $('.modal-body').html(data.message); $('#modal').modal('show'); 

Answer 2

如果不知道ajax调用是返回true还是false很难调试它

我确实看到了一条似乎需要ID标签的行。 不确定这是不是问题。

更改： $(".upvote").attr("data-toggle", "modal");

to： $(".upvote").attr("data-toggle", "#modal");

Answer 3

好的，这是正在发生的事情：

 $(".upvote").attr("data-toggle", "modal"); $(".upvote").attr("data-target", "#modal"); 

在这两行中，您指示所有 upvote按钮成为模态切换器。 这意味着它们将在实际的ajax调用之前触发模态窗口。 下一行：

 $('#modal').on('show', function () { ... } 

实际上是为模态注册一个事件，它会多次注册！

因此，您的代码中存在上述两个问题。 怎么解决？ 首先将事件注册到外面，这样你只会挂钩一次。 其次，删除设置data-toggle的两行，并仅显示模态替换它们：

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

如果有效，请告诉我。