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.

score 1 · Accepted Answer · answered May 07 '14 at 11:55

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>

answered May 07 '14 at 11:55

Nisanth Sojan

1,099
8
21

Hi thanks you. Yes this way has worked. I was trying to get a javascript solution as I have seen this work on other large websites that did not use bootstrap modal. – Keith Power May 07 '14 at 12:27
Another issue I have with using this solution is I have lost the hover effect over the when I hover over the trash can inside. I can get around this anyway with some changes to the css. I would still be interested if anyone has a javascript solution though – Keith Power May 07 '14 at 13:31
@KeithPower if you want the hover effect change the i tag to anchor " – Nisanth Sojan May 08 '14 at 05:30

javascript stop click stopPropagation inside bootstrap nav-pill for modal

1 Answers1