Colorbox not appearing on links called through ajax

I am trying to use colorbox on a page where i have three links each of which have onclick event which call an ajax page and response text is shown in the necessary divs. everything is working fine except colorbox links. After i call the content through ajax the links are not working to appear the colorbox. Here is my code to call the colorbox which is when page is loaded working.

<p>
$(document).ready(   
    function()  
    {  
       $(".editchecklist").colorbox({width:"50%", height:"35%", iframe:true, onClosed:function(){ location.reload(true); } });          
    }  
);

I tried to look for this problem but everything is related to jQuery ajax call not simple ajax call. The are advising to use .live() or rebind methods which i have no idea how and where should i use them. here is my ajax call code:

function getxmlhttp()    
{
    var xmlHttp = false;  
    if (window.XMLHttpRequest)  
    {  
        // If IE7, Mozilla, Safari, etc: Use native object  
        var xmlHttp = new XMLHttpRequest();  
    }else  
    {  
        if (window.ActiveXObject)  
        {  
            // ...otherwise, use the ActiveX control for IE5.x and IE6  
            var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
        }  
    }  
    return xmlHttp;  
}

function process_ajax2(phpPage, objID, getOrPost,clickedLink)  
{      
    xmlhttp = getxmlhttp();  
    var obj = document.getElementById(objID);  
    if(getOrPost == "get")  
    {          
        xmlhttp.open("GET",phpPage);  
        xmlhttp.onreadystatechange = function()  
        {          
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200)  
            {  
                document.getElementById('change_'+clickedLink).innerHTML = xmlhttp.responseText;  
            }  
        }  
        xmlhttp.send(null);  
    }  
}  

Please tell me how would i solve this pro开发者_C百科blem?

thanking you.

if I understand your question correctly, you've loaded content into the page via ajax after pageload.

The javascript that you've got is only going to work for data that is there on page load, so what you'd need to do is use .live() which will work on elements loaded at page load and after.

(note: I don't know what page you're trying to call here - so I am assuming it is in the link href)

Something like this should work

$(function(){
    $(".editchecklist").live('click',function(e){
         e.preventDefault();
         $.colorbox({
              width:"50%", 
              href:$(this).attr('href'),
              height:"35%", 
              iframe:true, 
              onClosed:function(){     
                   location.reload(true); 
              } 
         });
    });
});

more on jquery live http://api.jquery.com/live/