I am trying to open colorbox from dynamically loaded contents from ajax calls. On click of next it loads another block on the page and on clicking on that block, colorbox overlay should be opened.
But for the first item colorbox is opened, then after i am not able to bind colorbox with the link.
Please see, my javascript code which is used to bind colorbox is:
$(document).ready(function() {
$('#recommended-app-wrapper .app_download_link').each(function() {
$(this).colorbox({
href: $(this).attr('href'),
iframe: false,
onComplete: function() {
// Tooltip
$('#modal a.link_tooltip').each(function() {
$(this).click(function() {
return false;
});
var content = $(this).next('.hidden').html();
$(this).aToolTip({
tipContent: content,
fixed: true,
clickIt: false,
xOffset: -180,
yOffset: 30
});
});
// Clear-Default
$('#modal input.clear-default').clearDefault();
}
});
});
});
JSP code which calls the content page is
<dsp:a page="/fragments/product_app_download.jsp" iclass="custom custom-blue-smapp_download_link get-app">
<dsp:param name="id" param="element.id"/>
Get app
</dsp:a>
Please see the main page, from where the ajax call is being made and it loads the block from which user can click and open the colorbox. I have taken the screenshot of the code.
I think, the issue is , i am binding the colorbox on document.ready which is called only one time, then after on clicking of next it doesnt bind my next item to colorbox.
Kindly help.
thank you