javascript stop click stopPropagation inside bootstrap nav-pill for modal

Question

I am using Bootstrap 3 and I am trying to include two link in a nav-pills. One is the standard link to the page in the menu.

The other is a link of a trash can to the bootstrap modal to confirm deletion. The issue I having is the outer click event also affects the trash can click so I am taken to the page and I don't get the modal pop up. When I click the back button then the modal fires.

I have tried to use the stopPropagation but now the modal does not fire.

$(".pagedelete").click(function(event) {
    event.stopPropagation();
});

HTML:

<ul id="pageMenu" class="nav nav-pills nav-stacked sortable ui-sortable">
    <li class="" id="item_1">
        <a href="/edit/issue/516/2224">
            <i class="fa fa-file-text"></i>
            <span class="page-title">Keith goes to the...</span>
            <span class="pageNum">Cover</span>
            <i class="pagedelete fa fa-trash-o" data-toggle="modal" href="#deletePage"></i>
        </a>
    </li>
    <li class="" id="item_2">
        <a href="/edit/issue/516/2224">
            <i class="fa fa-file-text"></i>
            <span class="page-title">Bob climbs the m...</span>
            <span class="pageNum">Page 1</span>
            <i class="pagedelete fa fa-trash-o" data-toggle="modal" href="#deletePage"></i>
        </a>
    </li>

I have also tried to return false but the same issue. I am sure I am on the right track and it is more about how I am implementing it.

Answer 1

Can u try giving the trash link outside the a href

<ul id="pageMenu" class="nav nav-pills nav-stacked sortable ui-sortable">
<li class="" id="item_1">
    <a href="/edit/issue/516/2224">
        <i class="fa fa-file-text"></i>
        <span class="page-title">Keith goes to the...</span>
        <span class="pageNum">Cover</span>
    </a>
    <i class="pagedelete fa fa-trash-o" data-toggle="modal" href="#deletePage"></i>
</li>
<li class="" id="item_2">
    <a href="/edit/issue/516/2224">
        <i class="fa fa-file-text"></i>
        <span class="page-title">Bob climbs the m...</span>
        <span class="pageNum">Page 1</span>
    </a>
    <i class="pagedelete fa fa-trash-o" data-toggle="modal" href="#deletePage"></i>
</li>