我正在使用 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>
最佳答案
因为这些按钮在点击之前甚至没有 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');
关于jquery - Twitter Bootstrap 模式在第一次调用时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16359914/