How to setup Jquery Mobile navigation using OnClick Events

问题

I am building a hybrid application out of Jquery Mobile, Cordova and WordPress. My current question is regarding my navigation between "pages" in index.html that have the data-role="page" attribute.

Current Setup: I am using data-role="navbar" inside data-role="header" and EACH page has the following header:

 <div data-role="navbar">
                <ul>
                    <li><a class="blue-button home-button" href="#" data-transition="slidefade">HOME</a></li>
                    <li><a class="blue-button artist-refresh artist-button" href="#" data-transition="slidefade">ARTIST</a></li>
                    <li><a class="blue-button show-button" href="#" data-transition="slidefade">SHOW INFO</a></li>
                </ul>
            </div><!-- /navbar -->

main.js file I am trying to add event listeners to each of the navigation elements by class name and .ui-page-active class I am also bundling in a few other unique elements that have clickEvents but I reference them by ID:

function setupMainNav() { console.log("Settign Up SUB NAV");

$('.ui-page-active .show-button').on('click', function () {
    console.log("In the show info click");
    $.mobile.changePage("#show-info", {
        transition: "slide"
    });
});


$('.ui-page-active .home-button').on('click', function () {
    console.log("In the show info click");
    $.mobile.changePage("#home", {
        transition: "slide"
    });
});


$('#artistContactButton').on('click', function () {
    console.log("Show Contact Form");
    $.mobile.changePage("#artist-contactpage", {
        transition: "slide"
    });
});


$('div.ui-page-active a.artist-button').on('click', function () {
    console.log("artist button click");
    $.mobile.changePage("#cyan-home", {
        transition: "slide"
    });

});

$('#show_link').on('click', function () {
    $.mobile.changePage("#cyan-home", {
        transition: "slide"
    });

});

$('#shop_link').on('click', function () {
    $.mobile.changePage("#shop-home", {
        transition: "slide"
    });

});


}

What I do is try to all the setupMainNav() function every-time a page changes using the .on('pagecreate') but only the first page that is loaded which has the #show_link and #shop_link elements with those ID's and of course those are the only two.

What are best practices for setting up navigation that is controlled via the JS and not the <a href>

回答1:

Disclaimer: these are a few of what I think of as "best practices." Others may disagree; YMMV. Also this is assuming you don't want to use libraries or frameworks like Vue.js or React.js, which in general will do things quite differently. Depending on circumstances these libraries can have both advantages and drawbacks.

But within those limits, the general idea is this:

• Keep the event handler generic, so that one function can do multiple things.
• Pass in stuff that differs between links as attributes. This keeps things related to the activity together at the link.
• I like to attach the event listener higher up in the DOM and then handle the events as they bubble. In this case we're attaching the event to the ul tag, and catching any click events that bubble up from a tags. IMHO this has a few advantages:
  • if you mutate the list, new links will automatically use the current event handler.
  • you only have one event handler attached to the DOM, instead of 3 (however many a tags you have)
  • this also gives you the chance to add other event listeners directly to specific a tags if you want to do something special before (or instead of) the default action. Because events attached directly happen first, and then the event bubbles. If you want it to happen instead of, you would just call e.stopPropagation() to prevent the event from bubbling.

Also what I've done sometimes in the past is to have a single generic page with header and navbar, and then load the main content div via ajax. This has the very visually pleasing effect that when you go to a different page the navbar stays put, and doesn't reload. You could easily do this in the example code below, if changePage was doing an XHR/fetch, and then loading the contents into a main content div.

In this greatly simplified example, I show how we can use the href, innerText, and a data attribute to do different things depending on which link is clicked. Of course you can do as much (or as little) as you want/need in this regard.

$('ul.navbar').on('click', 'a', function(e) {
  var t = e.target;
  var info = t.dataset.info || '';
  console.log("click " + t.innerText + ' ' + info);
  $.mobile.changePage(t.href, {
    transition: "slide"
  });
  e.preventDefault();
  return false;
});

// stub of $.mobile.changePage
$.mobile = {
  changePage: function(href, opts) {
    console.log('changePage', href);
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class='navbar'>
  <li><a href="#home" data-info="let's go home!">HOME</a></li>
  <li><a href="#artist">ARTIST</a></li>
  <li><a href="#info">SHOW INFO</a></li>
</ul>

来源：https://stackoverflow.com/questions/59993144/how-to-setup-jquery-mobile-navigation-using-onclick-events