有關於jquery colorbox在指定selector時有時會要click twice才會啟發的問題與解決方式

這一個其實不太算是「問題」，應該叫「操作」觀念上的問題。

這個問題大部份會發生在你要放入colorbox的東西是用ajax抓出來的時候比較容易發生。

但這個主要會發生的原因其實就是因為你的資料不是「原本」就出現在document(指的是受影響的網頁)身，因為ajax的東西操作發生的時候，我們大都會寫在

1:  $(document).ready({  
2:    balabalabalabalabalabala  
3:  });  

所以已經告知script的啟用是在document完畢之後，那當然你要放入colorbox的東西在document ready的當下還沒出現在document上面…

但，其實這不是point....



主要當我們是這樣寫的時候

1:  $(document).ready({  
2:     $(document).on('click', "#bala1", function(event){  
3:        event.preventDefault();  
4:        $.ajax({  
5:           bala,  
6:           bala,  
7:           error: function(xhr) {  
8:           },  
9:           success: function(response) {  
10:              $("#bala").html(response);  
11:           }  
12:        });  
13:        $("#bala a").colorbox({rel: 'bala_group'});  
14:     });  
15:  });  

會發現我們去到bala點裡面的a link時，第一下沒反應，第二下就正常了~~
這當下會有點奇怪…因為基本上第二下時的反應是正常的，代表code應該沒錯…但為何第一下沒反應…

在下找到了這一篇：http://stackoverflow.com/questions/2441378/jquery-live-have-to-click-twice-to-activate-links
裡面提出解決方式的大大的說明「其實」沒有很直接的說到問題根本(我個人的認為啦)。
那個大大是說「會要點兩次的原因，是因為點第一下時沒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執行之後…所以會改成底下的

1:  $(document).ready({  
2:     $(document).on('click', "#bala1", function(event){  
3:        event.preventDefault();  
4:        $.ajax({  
5:           bala,  
6:           bala,  
7:           async: false,  
8:           error: function(xhr) {  
9:           },  
10:           success: function(response) {  
11:              $("#bala").html(response);  
12:           }  
13:        });  
14:        $("#bala a").colorbox({open: true,rel: 'bala_group'});  
15:     });  
16:  });