Question

I don’t know if this is to do with Raphael, ColorBox or jQuery. Here’s my the relevant code:

var image = paper.image(p.url_, tx, ty, img.width, img.height);
image[0].style.cursor = "pointer";
image.node.onclick = function() {
    $.colorbox({
        title: "Some Random Title",
        href: function() {
            $.post("test.php", { arg: p.id_ } );
        }
    });
};      

When watching the click in FireBug console the post is fired twice. It is also fired twice if it is a get as well.

If I change from the href function to a direct call of test.php then there is only a single get issued.

Why is the click event issuing the call twice when using jQuery?

UPDATE: Adding a call to alert in the anonymous function also fires twice so I guess it is something to do with colorbox.

UPDATE 2: Just tried wiring it to an actual page and FireBug spits this error message out in addition to the two get/posts. Which confirms this is a problem in ColorBox. Also it makes progress hard because while both calls complete colorbox sits showing it’s throbber.

c is undefined 
    (function(b,gb){var v="none",t="click"...c.settings=eb;b(c.init)})(jQuery,this)

Note: This only attached to the second call and not the first.

Answer 1

Not terribly familiar with colorbox so I am going out on a limb here. I’m guessing you want colorbox’s html to use the result of the post. I would put the post outside of color box. Is there any reason you aren’t using $(image.node).click()? Or even $(image).click()? Here’s how I would do it

var image = paper.image(p.url_, tx, ty, img.width, img.height);
image[0].style.cursor = "pointer";
$(image.node).click(function() {
    var post_html = $.post("test.php", { arg: p.id_ } );
    $.colorbox({
        title: "Some Random Title",
        html: post_html
    });
});

This may not fix it, but it will tell you if the problem is that colorbox fires the href twice or if the click is being executed twice.