jQM在关闭对话框或导航回来时，再次触发事件

Posted 2023-05-09

【中文标题】jQM在关闭对话框或导航回来时，再次触发事件

【英文标题】：jQM when closing dialog or navigating back, the event gets triggered again

【发布时间】：2012-09-24 10:36:25

【问题描述】：

我正在使用 jQuery Mobile 制作移动应用程序。进展顺利，但有一个主要问题我无法解决。

我有一个包含多个页面的 index.html (data-role=page)。因为我传递参数，所以我在我的 javascript 中使用点击事件调用这些页面。这些页面由从 json 文件（基于参数）创建（live pagebeforeshow）的列表视图组成。 例如，在类别页面上，您单击某个类别，它的 ID 会传递到下一页，该页面会在新列表中显示该类别的子类别。

现在奇怪的是，当我单击后退按钮或关闭对话框时，打开该页面或该对话框的单击事件通常会再次自动触发，但并非总是如此。 例如，您单击列表中的一个项目。点击事件触发一个对话框弹出。你关闭对话框，列表（上一页）被重新加载，然后对话框立即再次弹出，好像点击事件再次被触发......很奇怪。

我不知道。

这是我用来告诉浏览器获取 json 并显示我需要的内容的事件示例。

$('#dialog_zin_nl').live('pagebeforeshow', function(event, data) 

*这里是该页面上必须发生的所有代码，例如获取正确的 json 内容并将其附加到 html...

在那之后（在这个'pagebeforeshow'内）我声明我的按钮点击事件像这样

$("#execute_sub_rubriek").on("click", ".selected_zin_nl", function(event)
                    var selected_zin_nl  = $(this).attr('selected-zin-nl');
                    $.mobile.changePage( "#dialog_zin_nl?current_rubriek=" + current_rubriek_id + "&current_sub_rubriek=" + current_sub_rubriek_id + "&current_zin=" + selected_zin_nl + "",  role: "dialog" );
                  );

如果有人遇到过同样的问题或知道出了什么问题。请解释一下。

谢谢！

EDIT 如果我使用 pageinit 我没有这个问题。虽然我不能使用 pageinit，因为当用户选择另一个类别时，必须刷新页面的内容。

我的一个想法：如果页面被后退按钮调用，是否可以调用pageinit，如果页面被另一个按钮调用，是否可以调用pagebeforeshow？

【参考方案1】：

您在事件pagebeforeshow 中添加了一个on 侦听器，并且由于pageshow 在您导航回页面时触发，它将添加一个第二个 on 侦听器，这就是原因您的代码行为异常。

您需要将 pageinit 和 pageshow 代码分开，仔细考虑 pageinit 应该只初始化一个页面，每次查看页面时都会调用 pageshow，所以如果您有动态内容，您应该在那里刷新您的 DOM，但是将您的 on 听众附加到您的 pageinit 中，这样它只会发生一次。

这里有一个类似问题的链接，它强调了我们如何在 jQM 网站上清理我们的 JS：https://***.com/a/9368352/737023 - 如果你以这种方式组织它会更有意义 - 特别是跟踪什么时候触发以及什么运行什么时候。