Question

我需要在用户尝试退出表单并点击菜单时确认;我尝试使用preventDefault方法及其工作，但我需要获取菜单项的href，用户点击它以确认响应为真后设置。我有这个HTML代码：

<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>

我尝试在点击每个链接后找到链接href。以下代码是我的java脚本：

$('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');
        }
    });
});

但是$(this).attr('href')等于未定义。如何点击链接href？

Answer 1

在confirm内部的回调处理程序中，this的范围会对该函数进行局部更改，

所以将其改为

$('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

添加到gurvinder372的答案，您还可以使用箭头功能，而不是将this分配给$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');
        }
    });
});

如何点击链接href？

2 个答案: