Proxy Links

I came across the need to have one link act as a trigger for another link recently. In other words, clicking the “proxy” link really just causes the target link’s click handler to fire.

This isn’t something that will be useful often, but may come in handy in specific circumstances. In my case, I was working with the nice jQuery lightbox plugin colorbox. Colorbox automatically groups photos into galleries by rel tag. I wanted multiple links to spawn the same gallery, so all the links really needed to not only point to the same image, but really cause the same particular anchor element’s click handler to fire.

The markup was simple. Just create two links with the same href. In one, include the class “proxy”.

The following JavaScript enables the action by adding a click event handler to the proxy links. When called, the handler looks for an anchor with an identical href. If it finds one, it calls .click() on it. Otherwise, it works like a normal link.

$(document).ready(function () {

    $("a.proxy").click(function () {

              var href, links;

        // Select all anchors with the same href as the clicked item,
        // but without the proxy class.
        href = $(this).attr('href');
        links = $("a[href=\"" + href + "\"]:not(.proxy)");

        // If there were any matches:
        //   - Call the click handler of the first.
        //   - Stop propagation.
        if (links.length !== 0) {
        	$(links[0]).click();
        	return false;
        }

        // If there were no matches, propagate normally.
        return true;

    });

});