prevent Default not working on anchor link for fancy box

Question

Im having problems with fancy box with the code below, the link is still going through to youtube. The fancy box starts to 'popup' but then the page directs the youtube link.

JQuery

$("a.youtube-link").click(function(e) {
    e.preventDefault();
    $.fancybox({
        'padding'       : 0,
        'showCloseButton': false,
        'title'         : this.title,
        'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '?showinfo=0',
        'type'          : 'swf',
        'swf'           : {
            'wmode' : 'transparent',
            'allowfullscreen' : 'true'
        }
    });
    return false;
});

HTML Code

<div class="img-wrap">
  <a href="http://www.youtube.com/watch?v=videoid" class="img-link youtube-link" target="_self">                    
    <img src="link-to-imv" alt="">
  </a>
</div>

Any help appreciated.

Answer 1

it seems the problem was:

$('a').on('click touchend', function(e) {
  var el = $(this);
  var link = el.attr('href');
  window.location = link; 
});

The above was in my js file to help with iOS touch events, taking this out fixes the problem.

Answer 2

Try adding stopPropagation() also to stop bubbling of event.

$("a.youtube-link").click(function(e) {
e.preventDefault();
e.stopPropagation();
$.fancybox({
    'padding'       : 0,
    'showCloseButton': false,
    'title'         : this.title,
    'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '?showinfo=0',
    'type'          : 'swf',
    'swf'           : {
        'wmode' : 'transparent',
        'allowfullscreen' : 'true'
    }
});
return false;

});

Answer 3

What seems to me is you have a fancy box so it is quite possible that you have a dynamically generated anchor link if that is the case then you have to delegate the event to the closest static parent or to the document:

$(document).on("click", "a.youtube-link", function(e) {

Try with event delegation.

Answer 4

Just do something like this

<a href="#" class="img-link youtube-link" target="_self">

and then add absolute value to the href inside the js code

Answer 5

It looks like your function never reaches the point where it returns false.

Try to unbind your a element and then bind it to your function:

$(document).off("click", "a.youtube-link");

and then:

$(document).on("click", "a.youtube-link", function(){
  $.fancybox({
    'padding'       : 0,
    'showCloseButton': false,
    'title'         : this.title,
    'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') +  '?showinfo=0',
    'type'          : 'swf',
    'swf'           : {
        'wmode' : 'transparent',
        'allowfullscreen' : 'true'
    }
  });
  return false;
});

Also, check your console for any javascript errors and place a breakpoint on return false to check if it is triggered.

Answer 6

I encountered the same problem only when my website was being accessed on Safari in "Standalone Web Apps" mode (the website pinned to the user homescreen as an app.)

It turned out to be due to the following code which I inherited from the original website template:

/******************************************** Prevent links in standalone web apps opening Mobile Safari *****************************************/
if (("standalone" in window.navigator) && window.navigator.standalone) {
          jQuery('a').on('click', function(e){
            e.preventDefault();
            var new_location = jQuery(this).attr('href');
            if (new_location != undefined && new_location.substr(0, 1) != '#' && jQuery(this).attr('data-method') == undefined){
              window.location = new_location;
            }
          });
        }

I wanted to add this answer to help other people that may have similar code somewhere buried in their JS and didn't know what to look for.

The code does what it's supposed to, it allows users to navigate links without kicking them into a new Safari window, but it had an unwanted side-effect when certain anchor/links had custom javascript handlers attached to them.

I slightly modified the code to help me deal with those cases:

/******************************************** Prevent links in standalone web apps opening Mobile Safari *****************************************/
        if (("standalone" in window.navigator) && window.navigator.standalone) {
          jQuery('body').on('click','a:not(.no-js)',function(e){
            var new_location = jQuery(this).attr('href');
            if (new_location != undefined && new_location.substr(0, 1) != '#' && jQuery(this).attr('data-method') == undefined && jQuery(this).attr('onclick') == undefined){
              window.location = new_location;
            }
          });
        }

I have code elsewhere that specifically calls preventDefault on any HTML element with the no-js class. I use that class on links that should only be followed if the browser doesn't support Javascript, so I exclude any of those links from being handled by this onclick function. I also added a check and don't navigate/update the window.location if the clicked link has it's own "onclick" attribute specified.