第一次通话时，twitter引导模式不起作用 [英] twitter bootstrap modal won't work on first call
问题描述
我正在用twitter靴子练习，并创建了一个示例网站。我使用模态视图在用户投票时显示警告。但是当您第一次投票时它不会显示警告。它显示第二次。如果您访问我的测试网站并点击向上箭头，您将看到什么都不会显示。但是当你再次点击时，你会看到模态信息（这就是说你必须记录下来用我的语言进行投票），我无法弄清楚它为什么会发生。感谢您的帮助。
这是我的jquery。
< ;脚本>
jQuery（document）.ready（function（$）{
$ b $（'。upvote'）。click（function（event）{
event.preventDefault （）;
var voteID = $（this）.attr（id）;
$ .ajax（{
url：/ajax.php
type：post，
dataType：json，
data：{id：voteID，vote：'1'}，
成功：函数（数据）{
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 hataoluştu！'）。css（{color：'red'}）;;
$（'。modal-body'，this）.html（data.message）;
}）;
error：function（）{
$（'＃voteresponse'）。popover（{
title：'Hata！'，
内容：'服务器'，
}）;
}
}）;
}）;
$ b $（'。downvote'）。click（function（event）{
event.preventDefault（）;
var voteID = $（这个）.attr（id）;
$ .ajax（{
url：/ajax.php?Page=votetitle，
类型：post，
dataType：json，
data：{id：voteID，vote：'2'}，
success：function（data）{
if（data.success == 'true'）{
$（'＃voteresponse'+ voteID）.html（data.message）;
} else {
$（。downvote）。attr（data- （.model）;
$（。downvote）。attr（data-target，#modal）;
$（'＃modal'）。 （'show'）;
$（'＃modal'）。on（'show'，function（）{
$（'。ModalLabel'，this）.html（'Oy verirken hata '）。css（{color：'red'}）;;
$（'。modal-body'，this）.html（data.message）;
}）;
error：function（）{
$（'＃voteresponse'）。popover（{
title：'Hata！'，
内容：'服务器'，
}）;
}
}）;
}）;
}）;
< / script>
模态HTML
< div id =modalclass =modal hide fadetabindex = - 1role =dialogaria-labelledby =myModalLabelaria-hidden =true>
< div class =modal-header>
< h3 class =ModalLabel>< / h3>
< / div>
< div class =modal-body>
< / div>
< div class =modal-footer>
< button class =btndata-dismiss =modalaria-hidden =true> Kapat< / button>
< / div>
< / div>
和按钮
< button type =submitclass =btn btn-mini upvoteid ='。$ data ['ContentID']。'>< i class =icon-arrow-up >< / I>< /按钮>
< button type =submitclass =btn btn-mini downvoteid ='。$ data ['ContentID']。'>< i class =icon-arrow-down >< / I>< /按钮>
因为这些按钮甚至没有数据 - 在点击之前切换=模态属性。所以按钮只有在第一次点击后才能获得该属性，并可以在第二次点击时调用该模式。
您可以尝试删除这两行：
$（。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 hataoluştu！'）。css（{color：'red'}）;;
$（'。modal-body'，this） .html（data.message）;
））;
$（'＃modal'）。modal（'show'）;
正如Tallmaris在评论中所建议的那样，将事件监听器放在点击处理器中并不是最好的解决方案，除了我认为你甚至不需要这个监听器， （'show'，function（）{$（'＃modal'）。）（$'$'$'$'$'$'$'$'$' b $ b $（'。ModalLabel'，this）.html（'Oy verirken hataoluştu！'）。css（{color：'red'}）;;
$（'。modal-body'，this ）.html（data.message）;
}）;
$（'＃modal'）。modal（'show'）;
放到这里：
$（'。Modal标签'）。html（'Oy verirken hataoluştu！'）。css（{color：'red'}）;;
$（'。modal-body'）。html（data.message）;
$（'＃modal'）。modal（'show'）;
I'm practicing with twitter bootsrap and made an example website. I use modal view to display warnings when users vote. But it won't display the warning when you vote first time. it displays second time. if you go to my test site and click on up arrow you will see nothing will be displayed. but when you click one more time you will see the modal message.(which is saying you have to be logging to vote in my language) I cannot figure out why it's happening. thanks for your help.
this is my 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>
and buttons
<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>
Because those buttons don't even have the data-toggle="modal" attribute before clicking. So the buttons get that attribute only after the first click and can call the modal on second click.
You can try by removing these two lines:
$(".downvote").attr("data-toggle", "modal");
$(".downvote").attr("data-target", "#modal");
and instead just call the modal from your javascript:
$('#modal').modal('show');
Make sure you put it AFTER the $('#modal').on('show - function..so like this:
$('#modal').on('show', function () {
$('.ModalLabel',this).html('Oy verirken hata oluştu!').css({color: 'red'});;
$('.modal-body',this).html(data.message);
});
$('#modal').modal('show');
As Tallmaris suggested in the comments, placing the event listener in the click handler isn't the best solution, besides I don't think that you even need that listener, so do something like this - change this:
$('#modal').on('show', function () {
$('.ModalLabel',this).html('Oy verirken hata oluştu!').css({color: 'red'});;
$('.modal-body',this).html(data.message);
});
$('#modal').modal('show');
into this:
$('.ModalLabel').html('Oy verirken hata oluştu!').css({color: 'red'});;
$('.modal-body').html(data.message);
$('#modal').modal('show');
这篇关于第一次通话时，twitter引导模式不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
