my JQuery .click() function wont work with the android chrome browser

I have buttons that reveal nav links on click that dont work on my mobile chrome browser (I use a google pixel 2) I also have firefox mobile and it works fine there. it also works fine on the simulated phone sizes on my computer browsers.

here's my HTML

<div class="nav">
           
     <button class="nav_btn nav1_trig"><p>WORK</p></button>
            
            <div class="navItem nav1_pop external_links"> 
                <a class="proj_1_trig" title="" href="#"> link </a>
                <a class="proj_2_trig" title="" href="#"> link</a>
            </div>

</div> 

the <button class="nav_btn nav1_trig"><p>WORK</p></button> is supposed to reveal the links below when clicked.

here's my Jquery

$(".nav1_trig").click(function(){
    $(".nav1_pop").toggle(300);});

I've tried switching to .on('click', function(){ and .on('click touchstart', function(){ as well along with a bunch of other random fixes like giving the button the "button" type, turning it into a regular link, all with no results.

I also have a div with just a link in it that executes essentially the same code when clicked or tapped that works just FINE on my mobile chrome browser. What am I doing wrong here?

here's that div with the link that works fine on mobile chrome:

<div class="myInfo" id="about">
           <a class="about_trig"  title="" ><span>about me</span></a>
        </div>