使用Colorbox和javascript函数

Question

我正在尝试显示一个超链接，它有一个与之相关联的彩色框弹出窗口。javascript是：

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;
 }

javascript运行良好，并在正确的条件下显示链接，但问题是，当单击链接时，Colorbox不会被应用，页面会像普通超链接一样加载。

我在header中有以下代码：

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

如果我只输出标准html源文件中的超链接，它就能正常工作，并在Colorbox中正确显示。

任何帮助都将不胜感激:)

Answer 1

您需要等到附加了链接之后才能对其调用colorbox()方法。

移动您的colorbox()方法，使其位于您的innerHTML之后。

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

Answer 2

在动态添加html时，添加的事件已经不能被触发。尝试以下代码

jQuery(document).ready(function () {
      $("a.popup").on("click", function(event){
      applycolorbox($(this));
});


function applycolorbox($elem) {
         $elem.colorbox({ opacity:0.5 , rel:'group1' });
}