jquery - Twitter Bootstrap 模式在第一次调用时不起作用

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 在评论中建议的那样，将事件监听器放在点击处理程序中并不是最好的解决方案，此外我认为您甚至不需要那个监听器，所以做这样的事情 - 改变这个:

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