1

私はtwitterのブートストラップで練習していて、サンプルのウェブサイトを作りました。ユーザーが投票するときにモーダル ビューを使用して警告を表示します。ただし、初回投票時には警告は表示されません。2回目に表示されます。私のテスト サイトに移動して上矢印をクリックすると、何も表示されないことがわかります。しかし、もう一度クリックすると、モーダル メッセージが表示されます (これは、私の言語で投票するにはログインする必要があることを示しています)。ご協力いただきありがとうございます。

これは私の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>
4

3 に答える 3

5

これらのボタンには、クリックする前に data-toggle="modal" 属性さえないためです。したがって、ボタンは最初のクリック後にのみその属性を取得し、2 回目のクリックでモーダルを呼び出すことができます。

次の 2 行を削除して試すことができます。

 $(".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');
于 2013-05-03T13:32:46.020 に答える