Jquery Class on Click Works on Desktop But Not Mobile

jQuery class on click works on desktop but not mobile

I had jQuery UI loaded, no longer using, removed it and now pressing the tags works.

I assume if I left jQuery UI and wrapped the tags with a tag it may have worked?

in any case I also used old mates method of selecting the wrapper, not the document.

Click event on span element works on desktop, but not mobile (jquery)

I'm guessing it works if the element is tapped twice on mobile. To get around this, add a touchstart event. The touchstart event is fired when a touch point is placed on the touch surface.

$(document).on('click touchstart', "span" , function(){
}

onclick event don´t works in mobile devices

Firstly you shouldn't use inline event handler as they are very outdated and no longer best practice.

As you're using jQuery attach your event handlers unobtrusively. If you use on() you can hook to both the click and touch events which will then work for desktop and mobile devices. Try this:

<div class="drop_container_item">Click Now</div>
<input type="radio" class="check" name="veritas" value="yes">

jQuery(function($) {
  $('.drop_container_item').on('click touch', function() {
    $('.check').prop('checked', true);
    $('.drop_container_item').removeClass('drop_click');
    $(this).addClass('drop_click')
  });
});

Javascript removeClass/toggleClass works on desktop but not responsive page

Changing the selector in the compact.js file from #btn-offcanvas-menu to a#btn-offcanvas-menu fixed the issue and while this worked, it was the wrong way to correct the issue as connexo pointed out due to the duplicate ids.

The correct way to resolve this was to change the mobile navbar itself so I could use an id specifically for the mobile that only appeared there.

<nav id="mobile-menu" class="site-mobile-menu hidden-lg hidden-md">
    <ul>
        <li id="recent-mobile">
            <a href="#" id="btn-offcanvas-menu-mobile">Recent Results</a>
        </li>
    </ul>
</nav>

Next I changed the js function that populated the html for the mobile menu to use prepend instead of append so it populated everything above the Recent Results link...

$("#desktop-menu > ul").children().clone().prependTo($("#mobile-menu > ul")), $("#show-mobile-menu").on("click", function() {
    $(this).toggleClass("clicked"), $("#mobile-menu > ul").stop(true, true).slideToggle()
}); 

Then I tweaked the js function to toggle the class to mobile for the #btn-close-canvasmenu if the selector was #btn-offcanvas-menu-mobile to be used later...

$(document).on("click","#btn-offcanvas-menu,#btn-offcanvas-menu-mobile", {} , function(a){
    var id = $(this).attr('id');

    if (id === "btn-offcanvas-menu-mobile") {
        $("#btn-close-canvasmenu").toggleClass("mobile");
    }

    return a.preventDefault(), $(this).hasClass("isLeft") ? $("#offcanvas-menu").stop().animate({
        right: "-260px"
    }, 300) : $("#offcanvas-menu").stop().animate({
        right: "0px"
    }, 300), $(this).toggleClass("isLeft"), false
});

Finally, I tweaked the js function that closed the menu to check the class to determine which id to toggle the isLeft class for...

$(document).on("click","#btn-close-canvasmenu", {} , function(a){
    var id = $(this).attr('id');

    if ($(this).hasClass("mobile")) {
        var container = $("#btn-offcanvas-menu-mobile");
        $("#btn-close-canvasmenu").toggleClass("mobile");
    } else {
        var container = $("#btn-offcanvas-menu");
    }

    $("#offcanvas-menu").stop().animate({
        right: "-260px"
    }, 300), container.removeClass("isLeft")
});

jQuery click event not working in mobile browsers

Raminson has a nice answer if you are already (or don't mind) using jQuery Mobile. If you want a different solution, why not just modify your code as follows:

change that LI you're having trouble with to include an A tag and apply the class there instead of the LI

<!-- This is the main menu -->
<ul class="menu">
   <li><a href="/home/">HOME</a></li>
   <li><a href="#" class="publications">PUBLICATIONS & PROJECTS</a></li>
   <li><a href="/about/">ABOUT</a></li>
   <li><a href="/blog/">BLOG</a></li>
   <li><a href="/contact/">CONTACT</a></li>
 </ul>

And your javascript/jquery code... return false to stop bubbling.

$(document).ready(function(){
   $('.publications').click(function() {
       $('#filter_wrapper').show();
       return false;
   });
 });

This should work for what you are trying to do.

Also, I noticed your site opens the other links in new tabs/windows, is that intentional?

---

Related Topics