CODEWITHSUNDEEP
phpjavascriptjquerycolorbox
user2069576
user2069576

Reputation: 25

Using Colorbox and a javascript function

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 :)

Upvotes: 0

Views: 219

Answers (2)

Kamran Ali
Kamran Ali

Reputation: 5954

when adding html dynamically you, the event added already can not be triggered. try the following code

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


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

Upvotes: 0

zxqx
zxqx

Reputation: 5205

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

Upvotes: 2

Related Questions