使用Colorbox和一个javascript函数

Question

I'm trying to display a hyperlink that has a colorbox popup associated with it. The javascript is:

function bid() {    
  var bid = document.getElementById("bid").value;
  if (bid>0 && bid<=100) {
    var per = 3.50;
  } else if (bid>100 && bid<=200) {
    var per = 3.40;
  } else if (bid>200 && bid<=300) {
    var per = 3.30;
  }

 var fee = Math.round(((bid/100)*per)*100)/100;
 var credit = 294.9;

   if (fee>credit) {
     var message = 'Error';
   } else {
     var message = '<a class="popup" href="URL">The link</a>'; 
   }

   document.getElementById("bidText").innerHTML=message;
 }

The javascript works fine and displays the link in the right conditions, the problem however is that when clicking the link, the Colorbox isn't being applied and the page loads as a normal hyperlink.

I have the following code in the header:

jQuery(document).ready(function () {
  jQuery('a.popup').colorbox({ opacity:0.5 , rel:'group1' });
});

If I output just the hyperlink in the standard html source, it works fine and displays correctly in the Colorbox.

Any help would be greatly appreciated :)

Answer 1

You need to wait until you've appended the link before you call the colorbox() method on it.

Move your colorbox() method so that it comes after your innerHTML.

jQuery('a.popup').colorbox({ opacity:0.5 , rel:'group1' });