Using Colorbox and a javascript function

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

I'm not familiar with colorbox, but try altering where it says href="url" to href="#" — Doug
– Doug, Commented Feb 13, 2013 at 18:57

zxqx · Accepted Answer · 2013-02-13 18:59:02Z

2

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

answered Feb 13, 2013 at 18:59

zxqx

5,2352 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jack Over a year ago

document.ready is pointless here. The '.popup' item may or may not be in the DOM when the ready event fires. Zak's answer is correct, the poster needs to wait until he has added the anchor element to the DOM before querying for it.

Kamran Ali · Accepted Answer · 2013-02-13 19:00:21Z

0

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

answered Feb 13, 2013 at 19:00

Kamran Ali

5,9542 gold badges28 silver badges37 bronze badges

Collectives™ on Stack Overflow

Using Colorbox and a javascript function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related