[SOLVED] e.stopPropagation() is not working!?


#1

I have a link list with namnes that loads a new page if you click on the li.

And besides the name I have a heart icon.

And when I click on the heart I want to prevent the default behavior on the link and just open an alert instead.
And if I click anywhere else on the li then it should load the page as expected.

So I have tried to with

e.stopPropagation()

but it is not working, it still loads the page?

I have this structure now.

<a href="/klasslistor3/>  
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title">Anna Andersson</div>
          <div class="item-after">
          
		<i class="f7-icons fodelsedag">heart_fill</i>
     
          </div>
        </div>
         
      </div>
    </li>
    </a>

And here is the js code.

$$(document).on('click', '.fodelsedag', function (e) { 
      
e.stopPropagation() //this is not working....
app.dialog.alert("test alert")


});

Thanks for any input!


#2

Try

$$(document).on('click', '.fodelsedag', function (e) { 
e.stopImmediatePropagation()      
e.stopPropagation()
// pay attention to last "true" argument
}, true);