jquery colorbox指定selector时click twice才会启发的解决方式

 这一个其实不太算是‘问题’，应该叫‘操作’观念上的问题。

这个问题大部份会发生在你要放入colorbox的东西是用ajax抓出来的时候比较容易发生。

但这个主要会发生的原因其实就是因为你的数据不是‘原本’就出现在document(指的是受影响的网页)身，因为ajax的东西操作发生的时候，我们大都会写在
 

$(document).ready({  
balabalabalabalabalabala  
}); 

所以已经告知script的启用是在document完毕之后，那当然你要放入colorbox的东西在document ready的当下还没出现在document上面…

但，其实这不是point....

主要当我们是这样写的时候
 

$(document).ready({  
$(document).on('click', "#bala1", function(event){  
event.preventDefault();  
$.ajax({  
bala,  
bala,  
error: function(xhr) {  
},  
success: function(response) {  
$("#bala").html(response);  
}  
});  
$("#bala a").colorbox({rel: 'bala_group'});  
});  
}); 

会发现我们去到bala点里面的a link时，第一下没反应，第二下就正常了~~
这当下会有点奇怪…因为基本上第二下时的反应是正常的，代表code应该没错…但为何第一下没反应…

在下找到了这一篇教程，里面提出‘会要点两次的原因，是因为点第一下时没open，所以要第二下才会open’，但其实这不是‘原因’，而是我们就是要问‘为何第一下没open，要第二下’…

以我看过之后认知，我个人认为，主要是因为我们把ajax的启发放在某个listen下，比如上述文中的on('click'....)…因为动作是要click的行为确定之后才会做后续的ajax‘与’colorbox…所以在当第一下发生时，ajax的数据送出(但不知是否已完成)，colorbox也已启发，当下colorbox的对象是空的…那自然colorbox不会有直接的反应…而在第二下时，第二次的ajax数据送出(不知是否已完成)，colorbox的对象的html中还保有第一下ajax的response数据，所以第二下的colorbox有open…

所以要改成让colorbox因click的行为直接才open，因为这中间会有些微的时间差，所以可以在ajax的数据success之后而取得第一下的response data，然后为了程序上正常，最好也把ajax加上async: false的属性，让后序的重作要等ajax执行之后…所以会改成如下：

$(document).ready({  
$(document).on('click', "#bala1", function(event){  
event.preventDefault();  
 $.ajax({  
bala,  
 bala,  
 async: false,  
 error: function(xhr) {  
 },  
 success: function(response) {  
 $("#bala").html(response);  
 }  
 });  
$("#bala a").colorbox({open: true,rel: 'bala_group'});  
 });  
 });