jquery plugin won't fire when hamburger class element clicked

Question

I have a company WordPress website developed by a vendor where customers making online payments get navigated to a third-party website to manage that. Initially, we had direct urls built into the links.

My boss wanted us to have a pop-up window warning people they would be leaving our site, and, on confirmation, they get navigated to the site.

I built a quick and dirty "confirmation" plug in to look for the element ID for that link, and trigger the pop-up and subsequent navigation.

Since WordPress, using the Walker Texas Ranger code, builds the mobile menu, the mobile version of these links do not have any ID assigned to them, at all, because the link ID would be a duplicate (I think). I changed the plug in to look for the unique class that was created for that specific link. It works fine in the full-screen view, but won't work when the mobile/hamburger menu is active and opened.

Here is the html, for the menus. The second piece of code shows the very top menu, classified as "pre-header (shows up below the primary menu definitions in the html coding)," the bulk of the menu shows up in both normal and in the hamburger view, and then, in the second part of this first code passage, the "second menu" div is the top menu items, which get displayed at the bottom of the hamburger menu in mobile view -

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

Here is the top menu that displays and functions correctly in the full-screen view -

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

I've cut quite a bit out of the html code, just because it gets so busy and really isn't relevant to what it going on, so it probably won't work in a jFiddle, but my jQuery javascript is so basic, I'm hoping something will jump out. I'm not very experienced with 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
}
});

When I was originally using just the ID, it looked like this

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
}

});

});

I also tried this version with just ".menu-item-47".

All versions have been the same - works on the "preheader" div (javascript window pops up and navigates when "OK" is clicked), but not in the hamburger menu (nothing happens except the browser url displays the "#").

Answer 1

This should work for you. I just copied your code and made adjustments.

jQuery.noConflict();
jQuery("li.menu-item-47 a").on("click",function( event ) {
 event.preventDefault();
 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( this ,'_blank'); //This will open the website in a new tab
 }
});