JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="home" data-first="true">
<input type="text" id="nameText" />
</div>
<div data-role="page" id="about">ABOUT</div>
<div data-role="page" id="portfolio">PORTFOLIO</div>
<div data-role="page" id="contact" data-last="true">
  <a href="#" onclick="checkAlert()">click</a>
</div>

JavaScript

function checkAlert(){
alert(5);
}
$(document).on('swipeleft swiperight', function (event) {

    var ap = $("body").pagecontainer("getActivePage");

    if (event.type == 'swipeleft' && ap.attr("data-last") !== "true") {
        var nextPage = ap.next('[data-role=page]');
        $.mobile.changePage(nextPage, {
            transition: "slide"
        });
    } else if (event.type == 'swiperight' && ap.attr("data-first") !== "true") {
        var prevPage = ap.prev('[data-role=page]');
        $.mobile.changePage(prevPage, {
            transition: "slide",
            reverse: true
        });
    }
});