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

Question

我正在尝试使用JavaScript动态更改标题。我正在使用单击事件中使用ID的名称。问题是它仅向我显示了仅在e sec的标题，然后在更改页面后的标题消失了。

<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上的ListView项目，即#HomePage。

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

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

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

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

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

演示

Answer 2

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