Question

I am trying to implement a link inside of a DIV block which has a click event.

I would like the outer DIV click event not to run if the users clicks on the link.

My link looks like:

<a href="javascript: openVideo('videoID', this, event); " >Watch the video</a>

And JavaScript looks like:

 function openVideo(video, object, event) {
 
    $(object).html($(object).html()+"<iframe width='360' height='315' src='http://www.youtube.com/embed/"+video+"' frameborder='0' allowfullscreen></iframe>");
 
    event.stopPropagation();
 }

Unfortunately when I click on the link it executes the outer DIV code, and shows an error related to stopPropagation method:

Uncaught TypeError: Cannot call method ‘stopPropagation’ of undefined

What could be the issue?

Answer 1

Because there’s no event being called. Try calling it like this instead:

<a href="#" onclick="openVideo('videoID', this, event); " >Watch the video</a>

​