Question

我正在尝试使用javascript动态更改标题的标题。我在点击事件中使用id获取li的名称。问题是，它只显示了几秒钟的标题，然后在页面更改后标题消失。

<div data-role="main" id="page-content-ajax" class="ui-content jqm-content jqm-fullwidth">
    <ul data-role="listview" data-inset="true">
       <li class="li-el"><a href="flow/movements/movements.php" id="Movements">Movements</a></li>
</ul>
</div>

<script>
    $(document).ready(function() {
        $("#page-content-ajax").on('click', '.li-el', function() {
            var search_r = $('a', this).attr('id');
            $("#title-header").html(search_r); // just to check it works
        });
    });
</script>

Answer 1

在外部页面完全加载到DOM并创建后，您需要收听pagecontainerbeforetransition。此外，您需要定义一个全局变量，它包含新的 title ，能够从任何函数访问它。

var title = '';

将click绑定到主页pagecreate上的列表视图项目，即#HomePage。

$(document).on("pagecreate", "#HomePage", function () {
    $("li a").on("click", function () {
        title = $(this).attr("id");
    });
});

在pagecontainerbeforetransition上更新标题。您可以使用其他事件，但在显示页面时会发生更改，这对用户来说可能是显而易见的。

ui.toPage对象保存即将显示的页面数据。它用于在其中找到标题以定位其标题。

请注意，您只想更改#HomePage以外的网页的标题，因此，我使用了.not()选择器来排除#HomePage。

$(document).on("pagecontainerbeforetransition", function (e, ui) {
    $(".ui-header .ui-title", $(ui.toPage[0]).not( $("#HomePage") ) ).text(title);
});

<强> Demo

Answer 2

我认为如果您想留在该页面中，则需要在代码中使用AJAX帖子。AJAX example

页面更改后jQuery移动保存更改

2 个答案: