Why is this not working with stopPropigation?

Why is this not working with stopPropigation?

Hi,

I can't for the life of me work out whats going on here :/ I have this function:

  1. jQuery(document).ready(
  2.     function($) {
  3.         $(document).on("click", '.add_fave', function(event) {
  4.                
  5.                 event.preventDefault();
  6.                 event.stopImmediatePropagation();
  7.                 return false;
  8.                
  9.                 alert("HERE");
  10.    
  11.             });
  12.     });
  13. )

It never gets to alert("HERE") (which is fine), yet it always then redirects of that page :/ I thought using "return false" would stop that - but I'm guessing not.

An example of the HTML:

  1. <div align="center" style="background-image: url(/images/v25/image-bg.gif); background-repeat: no-repeat; max-width: 168px; width:168px; height: 207px; padding-top: 8px; cursor:pointer;hand;" onclick="location.href='http://www.test.com'">
  2.     <div align="right" style="max-width: 140px; z-index: 10001;">
  3.             <div id="bookmark_status_1234" class="the_fave_div">
  4.                 <img class="add_fave" id="fave_add_1234" src="/images/friendGreen.png" alt="Add To Favorites" title="Add To Favorites" width="22" height="18" border="0">
  5.             </div>
  6.     </div>
  7.     <div align="center">
  8.         <div style="max-width: 150px;">
  9.         </div>
  10.     </div>
  11.  </div>

The code from :

  1. $(document).on("click", '.add_fave', function(event) {

...works fine to start with - but then it seems like the onclick="" code in the first line of the HTML also gets run as well (which we dont want).

Can anyone think of a way around this? In the mean time I have just remove the redirect in that code - but its not ideal (as we want the whole box to be clickable)

TIA!

Andy