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

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>

模态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').on('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 在 cmets 中建议的那样，将事件侦听器放置在点击处理程序中并不是最好的解决方案，此外我认为您甚至不需要该侦听器，所以请执行以下操作 - 更改：

$('#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");

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

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

其实是为modal注册一个事件，而且会注册多次！

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

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

让我知道这是否有效。