当单击Hamburger类元素时，jQuery插件不会触发

我有一个由供应商开发的WordPress公司网站，在线支付的客户可以导航到第三方网站进行管理。最初，我们在链接中内置了直接URL。

我的老板希望我们有一个弹出窗口，警告人们他们将离开我们的网站，并且在确认后，他们将被导航到该网站。

我构建了一个快速而脏的“确认”插件来查找该链接的元素ID，并触发弹出窗口和后续导航。

由于WordPress使用Walker Texas Ranger代码构建移动菜单，这些链接的移动版本根本没有为其分配任何ID，因为链接ID将是重复的（我认为）。我更改了插件以查找为该特定链接创建的唯一类。它在全屏视图下工作正常，但在移动/汉堡菜单处于活动状态并打开时不工作。

这是菜单的html。第二段代码显示最顶部的菜单，分类为“pre header（在html编码中显示在主菜单定义的下方）”，大部分菜单显示在普通视图和hamburger视图中，然后在第一段代码的第二部分，“second menu”div是顶部菜单项，在mobile view中显示在hamburger菜单的底部-

<div class="open" id="mobile-menu">
<ul id="menu-main-navigation-menu" class="nav navbar-nav">
    <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-43"><a href="http://www.oursite.com/about-us/">About Us</a><span class="wrap-fa"><i class="fa fa-angle-down"></i></span>
        <ul role="menu" class="dropdown-menu" style="">
            <li id="menu-item-529" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-529"><a href="http://www.oursite.com/about-us/our-history/">Our History</a></li>
            <li id="menu-item-535" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-535"><a href="http://www.oursite.com/about-us/ourkindoforganization/">What is a what we are?</a></li>
            <li id="menu-item-235" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-235"><a href="http://www.oursite.com/about-us/community-impact/">Community Impact</a></li>
            <li id="menu-item-521" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-521"><a href="http://www.oursite.com/about-us/news/">News</a></li>
        </ul>
    </li>
    <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-41"><a href="http://www.oursite.com/about-us/member-resources/">Member Resources</a><span class="wrap-fa"><i class="fa fa-angle-down"></i></span>
        <ul role="menu" class="dropdown-menu" style="">
            <li id="menu-item-522" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-522"><a href="http://www.oursite.com/events/">Calendar of Events</a></li>
            <li id="menu-item-539" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-539"><a href="http://www.oursite.com/about-us/member-resources/customer-benefits/">Customer Benefits</a></li>
            <li id="menu-item-1357" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1357"><a href="http://www.oursite.com/about-us/member-resources/forms/">Forms</a></li>
            <li id="menu-item-545" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-545"><a href="http://www.oursite.com/about-us/member-resources/referral/">Refer A Friend</a></li>
        </ul>
    </li>
</ul>


<div class="top clearfix second-menu">
    <ul class="txt-spacing">
        <nav class="navbar" id="main-navigation" role="navigation">
            <div class="main-navigation">
                <ul id="menu-top-menu-1" class="nav navbar-nav">
<!--    This is the menu item, you can see the list item element has no id -->              
                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47"><a href="http://www.oursite.com/#">Make a Payment</a></li>

                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-48"><a target="_blank" href="https://www.oursite.com/Customer_Portal/">Customer Account Services</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-954"><a href="http://www.oursite.com/secure-log-ins/">Secure Logins</a>
                        <ul role="menu" class="dropdown-menu">
                            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2383"><a href="http://www.oursite.com/agent-tools/">Agent Tools</a></li>
                            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2384"><a href="http://www.oursite.com/agent-login/?redirect=/store_access/">Location</a></li>
                        </ul>
                    </li>
                <li class="social menu-item menu-item-type-custom menu-item-object-custom menu-item-2478"><a target="_blank" href="https://www.facebook.com/NMBLife/"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
                <li class="social menu-item menu-item-type-custom menu-item-object-custom menu-item-2480"><a target="_blank" href="https://www.linkedin.com/company/national-mutual-benefit/"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></li>
                </ul>
            </div>
        </nav>
    </ul>
</div>

以下是在全屏视图中正确显示和运行的顶部菜单-

<div class="pre-header">
    <div class="left">
        <em>Doing the stuff we do when we do it</em>

        <div>
            <form role="search" method="get" class="search search-form mobile" action="http://www.oursite.com/">
                <div class="input-group">
                    <input type="submit" class="fa fa-search" value="">
                    <span class="sr-only">Fleet Worthy Search</span>
                    <input type="search" id="search-field-mobile" class="search-field form-control" value="" name="s" placeholder="Search" title="Search:" required="">
                </div>
            </form>
        </div>
    </div>
    <div class="right">
        <nav class="navbar" id="main-navigation" role="navigation">
            <div class="main-navigation">
                <ul id="menu-top-menu" class="nav navbar-nav">
        <!-- Here is the part that displays as the top menu, and works fine -->     
                    <li id="menu-item-47" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47"><a href="http://www.oursite.com/#">Make a Payment</a></li>
                    <li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-48"><a target="_blank" href="https://www.oursite.com/Owner_Portal/">Owner Services</a></li>
                    <li id="menu-item-954" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-954"><a href="http://www.oursite.com/secure-log-ins/">Secure Logins</a>
                        <ul role="menu" class="dropdown-menu">
                            <li id="menu-item-2383" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2383"><a href="http://www.oursite.com/agent-tools/">Employee Tools</a></li>
                            <li id="menu-item-2384" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2384"><a href="http://www.oursite.com/agent-login/?redirect=/store_access/">Store Access</a></li>
                            <li id="menu-item-2385" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2385"><a href="http://www.oursite.com/agent-login/?redirect=/systfacs/">System Access</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

我已经删掉了很多html代码，只是因为它太忙了，而且与正在发生的事情无关，所以它可能无法在jFiddle中工作，但我的jQuery javascript非常基础，我希望能跳出一些东西。我对JavaScript不是很有经验。

jQuery.noConflict();
jQuery("li.menu-item-47").on("click",function()
{
if(confirm("YOU ARE LEAVING THE WEBSITE" + \'\\n\' + "" + \'\\n\' + "You are being connected to a secure bill payment system.  Press Ok to continue.")) 
{
window.open(\'https://secure.ourbillingservice.com/pbills/payer/welcomeDirect.do?h=t424eag5460adfa\',\'_blank\'); //This will open the website in a new tab
}
});

当我最初只使用ID时，它看起来是这样的

jQuery.noConflict();
jQuery(document).ready(function(){
var menuID = jQuery(\'#menu-item-47\');

findA = menuID.find(\'a\');

findA.click(function(event){
if(confirm("YOU ARE LEAVING THE WEBSITE" + \'\\n\' + "" + \'\\n\' + "You are being connected to a secure bill payment system.  Press Ok to continue.")) 
{
window.open(\'https://secure.directbiller.com/pbills/payer/welcomeDirect.do?h=t137tn3z73\',\'_blank\'); //This will open the website in a new tab
}

});

});

我还用“.menu-item-47”试用了这个版本。

所有版本都是相同的-在“preheader”div上工作（单击“OK”时会弹出javascript窗口并进行导航），但在hamburger菜单中不工作（除了浏览器url显示“#”）之外，什么都不会发生。

小码农CODE

相关推荐

从wp-content/languages/plugins/woocommerce-ro_RO？编辑语言文件是安全的