How can i get clicked link href?

Question

I need to confirm users when they try to exit forms and click on menu; I try to use preventDefault method and its work, but I need get menu item's href that user clicks on it to set after confirm response is true. I have this HTML code:

<ul class="page-sidebar-menu  page-header-fixed page-sidebar-menu-hover-submenu ">
        <li class="start ">
                <a href="/Dashboard">
                    <i class="icon-home"></i>
                    <span class="title">Dashboard</span>
                </a>
        </li>
        <li class=" ">
                <a href="javascript:;" class="auto">
                    <i class="icon-wrench"></i>
                    <span class="title">Administration</span>
                </a>
                <ul class="sub-menu">
                        <li>
                                <a href="/OrganizationUnits">
                                    <span><i class="sub-menu-icon icon-layers"></i> Organization units</span>
                                </a>
                        </li>
                </ul>
        </li>
        <li class=" ">
                <a href="javascript:;" class="auto">
                <a href="javascript:;" class="auto">
                    <span class="title">Base Info</span>
                </a>
                <ul class="sub-menu">
                        <li>
                                <a href="javascript:;" class="auto">
                                    <i class="fa fa-map-marker"></i>
                                    <span class="title">Area</span>
                                    <span class="arrow"></span>
                                </a>
                                <ul class="sub-menu">
                                        <li>
                                            <a href="/Country">
                                                <span><i class="sub-menu-icon fa fa-map-marker"></i> Countries</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/Zone">
                                                <span><i class="sub-menu-icon fa fa-map-marker"></i> Zones</span>
                                            </a>
                                        </li>
                                </ul>
                        </li>
                </ul>
        </li>
</ul>

I try to find links href after each link is click. the following code is my java script:

$('ul.page-sidebar-menu li a').click(function(e) {
    e.preventDefault();
    confirm("Are You Sure To Exit From This Form?", function (isConfirm) {
        if (isConfirm) {
            window.location = $(this).attr('href');
        }
    });
});

But $(this).attr('href') equals undefined. How can I get clicked link href?

Answer 1

Inside confirm 's callback handler, scope of this changes local to that function,

So change it to

$('ul.page-sidebar-menu li a').click(function(e) {
    e.preventDefault();
    var $self = $(this); //notice this new line
    confirm("Are You Sure To Exit From This Form?", function (isConfirm) {
        if (isConfirm) {
            window.location = $self.attr('href'); //notice $(this) is replaced by $self
        }
    });
});

Answer 2

Adding to gurvinder372 's answer, you can also use arrow function instead of assigning this to $self .

$('ul.page-sidebar-menu li a').click(function(e) {
    e.preventDefault();
    confirm("Are You Sure To Exit From This Form?", isConfirm => {
        if (isConfirm) {
            window.location = $(this).attr('href');
        }
    });
});