修改jquery mobile中的后退按钮href

Question

根据某些情况，我需要在 jQuery mobile 中更改后退按钮 link。但是以下方法不起作用。

$.mobile.activePage.find('a[data-rel="back"]').attr('href',"#newPage");

在控制台中，它显示了新的 url，但它不起作用。另外，谁能告诉在jQuery mobile中修改后退按钮历史的正确方法？

Answer 1

方法一

如果你想在点击它时重定向，你必须从a 标记中删除data-rel，因为data-rel 比href 具有更高的优先级。这是我如何让它工作的。

• 我有三页，#mypage1，animals，page3

• 在第二页的pagebeforeshow 上有一个后退按钮，我把这段代码放入其中，我将href 更改为重定向到#page3：

  $(document).on("pagebeforeshow", "#animals", function (e) {
     var $a = $.mobile.activePage.find('a[data-rel=back]');
     $a.attr("href", "#page3");
     $a.removeAttr("data-rel");
  });
  

• 注意pageinit 在这种情况下不起作用，因为activePage 对象仍将指向旧页面。

• 演示：http://jsfiddle.net/hungerpain/rDtKL/2/

方法2（更好的方法）

将此事件绑定到 a 并设置为 data-rel。您可以在pageinit 中绑定它：

$(document).on("pageinit", "#animals", function (e) {
    $(this).on("click", "[data-rel=back]", function (e) {
        e.stopImmediatePropagation();
        e.preventDefault();
        $.mobile.changePage("#page3");
    });
});

请注意，您必须同时使用 stopImmediatePropagation 和 preventDefault 才能在点击时执行此操作。

演示：http://jsfiddle.net/hungerpain/rDtKL/3/

方法3（最干净的方法）

以编程方式将该按钮添加到您的header，以便您决定是否需要该data-rel 属性。

Answer 2

您可以在按钮中添加 id="backchange" 并更改 jQuery 中的文本：

$("#backchange .ui-btn-text").text("nextext");