Question

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

这是我的jquery。

<script>
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' 
                      });
                  }
                }); 
              });
            });
</script>

modal html

    <div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 class="ModalLabel"></h3>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Kapat</button>
      </div>
    </div>

和按钮

<button type="submit" class="btn btn-mini upvote" id="'.$data['ContentID'].'"><i class="icon-arrow-up"></i></button> 
<span id="voteresponse'.$data['ContentID'].'">'.intval(  $data['TotalVotes'] - $data['VoteSum']  ).'</span>
<button type="submit" class="btn btn-mini downvote" id="'.$data['ContentID'].'"><i class="icon-arrow-down"></i></button>

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

至：$(".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");

如果有效，请告诉我。

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

3 个答案: