Jquery click event is not getting triggered correctly in the mobile browsers

Question

Have a small problem here.. So i am using JQuery to perform show-more; show-less functionality to my website, but it is working only on PC. On mobile devices when clicked it returns me to the main page, or other page, which is really irritating. Here is the website https://ifsbulgaria.com/services.html So any ideas? I apply my code here:

 $(document).ready(function() { var showChar = 100; var ellipsestext = "..."; var moretext = "още"; var lesstext = "прибери"; $('.more').each(function() { var content = $(this).html(); if (content.length > showChar) { var c = content.substr(0, showChar); var h = content.substr(showChar - 1, content.length - showChar); var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>'; $(this).html(html); } }); $(".morelink").click(function() { if ($(this).hasClass("less")) { $(this).removeClass("less"); $(this).html(moretext); } else { $(this).addClass("less"); $(this).html(lesstext); } $(this).parent().prev().toggle(); $(this).prev().toggle(); return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="thumbnail"> <div class="fa-center"> <div class="fa-fa-icons" style="width:100%;height:100px;"> <i class="far fa-file-alt fa-3x"></i> </div> </div> <div class="caption"> <h3 class="carousel-h3"><a href="#">IFS DOCUMENT MANAGEMENT ™</a></h3> <p class="carousel-p comment more" id="para-3">ви дава пълен контрол над фирмената документация. Тук създавате и развивате фирмените документи. Поддържа се сканирането на фактури. Интерфейсът е интуитивен и лесен за използване.</p> <button href="#myDIV3" class="btn btn-link" onclick="myFunction3()" id="3" role="button">Виж повече</button> </div> </div> 

Answer 1

Prevent the default action on the <a> click using event.preventDefault()

Change

$(".morelink").click(function(){

To

$(".morelink").click(function(event){
    event.preventDefault()

Answer 2

@charlietfl is correct applying the preventDefault() method should do the trick. I tested in chrome along with mobile device mode and worked fine.

$(".morelink").click(function(e){
    e.preventDefault();
}

You could also update your more links href value instead to something like javascript:void(0);

If this doesn't work, the other possibility might be you are missing the document.ready event altogether, and your script is not being ran at all. Trying changing to $(window).load(function(){....}) if all else fails.