Links in jQuery Validation error messages don't work on first click

If I customise a jQuery Validation (i.e. https://jqueryvalidation.org/) error message to include a link, e.g.

$("form").validate({
  messages: {
    foo: {
      required: 'This field is required, <a href="#" onclick="alert(0); return false;">click here to find out why</a>',
    }
  }
});

The link doesn't work on the first click, only on second and subsequent.

Demo here: http://jsfiddle.net/jo6myLf9/

What's going on?