如何使用 OnClick 事件设置 Jquery Mobile 导航

Posted 2023-05-08

【中文标题】如何使用 OnClick 事件设置 Jquery Mobile 导航

【英文标题】：How to setup Jquery Mobile navigation using OnClick Events

【发布时间】：2020-05-16 16:53:42

【问题描述】：

我正在用 Jquery Mobile、Cordova 和 WordPress 构建一个混合应用程序。我当前的问题是关于我在 index.html 中具有 data-role="page" 属性的“页面”之间的导航。

当前设置：我在 data-role="header" 中使用 data-role="navbar"，并且 每个 页面具有以下标题：

 <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 文件我正在尝试通过类名和 .ui-page-active 类向每个导航元素添加事件侦听器我还捆绑了其他一些具有 clickEvents 但我通过 ID 引用它们的独特元素：

函数 setupMainNav() console.log("设置 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"
    );

);

我所做的是每次使用.on('pagecreate') 更改页面时尝试所有 setupMainNav() 函数，但只有加载的第一页具有带有这些 ID 的 #show_link 和 #shop_link 元素，当然还有那些是仅有的两个。

设置通过 JS 而不是 <a href> 控制的导航的最佳做法是什么

【问题讨论】：

我通常使用href 和其他属性来指示变化的东西，因此您可以为大多数/所有导航使用通用事件侦听器/处理程序。减少代码重复。然后只需使用event.preventDefault() 和return false 来防止href 导致其默认导航发生。

@David784 无论如何你都可以为我指出正确的方向或提供更充实的示例。我理解阻止默认导航，但我的文档中的每个页面都有一个完全一样的头部和导航，我不是以正确的方式去做吗？

【参考方案1】：

免责声明：这些是我认为的“最佳做法”中的一些。其他人可能不同意； YMMV。这也是假设您不想使用像 Vue.js 或 React.js 这样的库或框架，它们通常会以完全不同的方式做事。根据具体情况，这些库既有优点也有缺点。

但在这些限制内，总体思路是这样的：

保持事件处理程序通用，以便一个函数可以执行多项操作。 将链接之间不同的内容作为属性传递。这会将与活动相关的内容放在链接中。 我喜欢将事件侦听器附加到 DOM 中更高的位置，然后在事件冒泡时对其进行处理。在这种情况下，我们将事件附加到ul 标签，并捕获从a 标签冒出的任何click 事件。恕我直言，这有几个优点： 如果您改变列表，新链接将自动使用当前事件处理程序。 您只有一个附加到 DOM 的事件处理程序，而不是 3 个（无论您有多少 a 标签） 如果您想在默认操作之前（或代替）执行一些特殊操作，这也使您有机会将其他事件侦听器直接添加到特定的a 标记。因为直接附加的事件首先发生，然后事件冒泡。如果您希望它发生而不是，您只需致电 e.stopPropagation() 以防止事件冒泡。

此外，我过去有时所做的是创建一个带有标题和导航栏的通用页面，然后通过 ajax 加载主要内容 div。这具有非常视觉上令人愉悦的效果，当您转到不同的页面时，导航栏保持不变，并且不会重新加载。如果changePage 正在执行 XHR/fetch，然后将内容加载到主内容 div 中，您可以在下面的示例代码中轻松执行此操作。

在这个大大简化的示例中，我展示了如何使用 href、innerText 和 data 属性来根据单击的链接执行不同的操作。当然，您可以在这方面做尽可能多（或尽可能少）的工作。

$('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>