Making a <cite> tag clickable with jQuery

Question

Ok, so here's the skinny...

I've worked out a jQuery function that will first look at the page and search for <cite> tags. Then, it looks at the text contained within it and searches for a hyphen. If it finds one, then everything BEFORE the hyphen is used as the text within the tag. Whereas, everything AFTER the hyphen is used in an onlick event that opens a new window to that url.

Here's what it looks like:

 // Custom function for <cite> tags making them clickable
 $('cite:contains("-")').each(function(){
  var split=$(this).html().match( /([\s\w]+)[\-](.+)$/i );
  $(this).text(split[1]);
  $(this).click(function(){
   window.open( split[2] );
   return false;
  });
 });

And here is how it's used:

<blockquote>
This is quoted text from some article somewhere on the web... 
<cite>Source of Quote - http://quotedsitesource.com&lt;/cite&gt;
</blockquote>

Now, I've got it working perfectly on a static page... See here: http://blatantwasteofspace.com/crapadoodledoo/cite-test.html

However, when I try to implement it as a script that's loaded up in a WordPress theme, it fails miserably! See here: http://blatantwasteofspace.com/at-random/quotes-time I don't understand it... I mean, I'm loading the exact same version of jQuery. At first I thought it might be because I was using wp_enqueue_script('jquery') to load jQuery since it loads up the noconflict version... So, I removed that and just loaded the same version I'm loading in the static page, but still no dice.

Any ideas?

Answer 1

It could be that your script is loaded before the contents. If you try something like this instead:

$(document).ready(function(){
 $('cite:contains("-")').live('click', function(){
  var split=$(this).html().match( /([\s\w]+)[\-](.+)$/i );
  window.open( split[2] );
  return false;
 });
});

However, that will still show the link in the text and not removing it (and it will do the parsing once you click the tag, not before), but at least it should work.

Answer 2

WordPress is automatically turning your ASCII - dashes into – en-dashes (seen in the page as –). This character won't match the ASCII dash in the regex.

(Say no to misguided automatic “smart” typography, kids! En-dash isn't even the right mark as it normally denotes numerical ranges like 1–10. The em-dash ‘—’ would be more suitable here.)

Is there any good reason why the cites shouldn't be actual links? It would also make the processing easier. eg.

<cite><a href="http://blah"&gt;Blah&lt;/a&gt;&lt;/cite&gt;

$('cite a').click(function(e) {
    var pop= window.open(this.href);
    return pop && !pop.closed;
});