How to ignore the element below the clicked element - NonFactors MVC Grid

Question

I am using NonFactor MVC grid to create a grid with clickable rows:

$('.mvc-grid').mvcgrid({
    reloadEnded: function () { $('.lds-facebook').hide(); },
    rowClicked: function (row, data, e) { window.location.href = '@Url.Action("Details","CRMTItems")/' + data.Id }
});

Where the html generated for a row looks like this

<tr class="Opportunity crmtRow">
        <td class="hidden">9</td>
        <td>Project Name</td>
        <td>Client Name</td>
        <td>Project Owner</td>
        <td><a class="btn btn-default btn-sm rowWorkspaceLink pull-right" 
               href="http://google.com" 
               target="_blank"><span class="glyphicon glyphicon-globe"></span></a></td>
</tr>

So when I click on a row, it takes me to the view of that item, and if I click on the glyphicon-globe , it takes me to http://google.com

The problem I'm seeing is that if I click on the globe, it does pop out a new tab with google, but then in the original tab it also navigates to the item page. When hovering over the globe, I can see that hover is also being applied the row element

How can I get a click on the glyph icon to ignore the element below? Ie if I click the globe icon, the page should not redirect, but a new tab should open and navigate to google

this fiddle illustrates my problem

Answer 1

You can use

event.preventDefault(); If this method is called, the default action of the event will not be triggered.

event.stopPropagation(); Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

//Add a click event listener for elements with class .glyphicon-globe
$('.rowWorkspaceLink .glyphicon-globe').click(function(event) {
  event.preventDefault();   //Add this so that page will not open when click on .glyphicon
  event.stopPropagation();  //Add this so the the even of the parent will not be executed

  //Add the events for glyphicon
});

Doc: event.preventDefault() , event.stopPropagation()

Answer 2

This must be some quirk of the Nonfactors Mvc-Grid library , because when I do this it works fine

Removed rowClicked option from grid init

$(document).ready(function () {
    $('.mvc-grid').mvcgrid({
        reloadEnded: function () { $('.lds-facebook').hide(); }
    });

Added the following code as per Eddie's suggestion

$(function () {
    $("body").on('click', '.rowWorkspaceLink .glyphicon-globe', function (event) {
        event.stopPropagation(); //Add this so the the even of the parent will not be executed
    });


    $("body").on('click', '.crmtRow', function (event, data) {
        var id = $(this).closest('tr').find('td:first').text();
        window.location.href = "@Url.Action("Details", "CRMTItems")/" + id;
    });
});

And now it seems to work. I say this must be caused by the rowClicked option somewhere in the NonFactors library, because this is not an issue in jsfiddle, and it now works fine after manually setting the row clicked event.