个人中心
gpt4 book ai didi

jquery-mobile - JQueryMobile监听点击

转载 作者：行者123 更新时间：2023-12-01 04:56:58 25 4
gpt4 key购买 nike

我试图理解jQueryMobile导航中的页面事件，但是我发现了一些非常奇怪的行为，因为一些事件处理程序被多次调用：

我有两个页面：home.html和disclaimer.html。两者都包含相同的标头：

<head>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/events.js"></script>
    <script src="js/jquery.mobile-1.2.0.min.js"></script>
</head>


在home.html页面上是一个链接： 

<section data-role="page" id="home">
    <a href="#" id="test">Test</a>
</section>


并且在文件events.js中是以下代码： 

var i = 0;

$(document).on('pageinit', 'section#home', function(event) {
    console.log(i++, 'pageinit');
    $('a#test').on('click', function() {
        console.log(i++, 'click pageinit');
    });
});

$(document).on('pagebeforeshow', 'section#home', function(event) {
    console.log(i++, 'pagebeforeshow');
    $('a#test').on('click', function() {
        console.log(i++, 'click pagebeforeshow');
    });
});


然后，我执行以下步骤：


导航到home.html（http）
点击链接
转到disclaimer.html（ajax）
转到home.html（ajax）
点击链接


具有以下控制台输出： 

0 "pageinit"             // step 1
1 "pagebeforeshow"
2 "click pageinit"       // step 2
3 "click pagebeforeshow"
4 "pagebeforeshow"       // step 4
5 "click pageinit"       // step 5
6 "click pagebeforeshow"
7 "click pagebeforeshow"


有道理吧？但是现在很奇怪。当我更改访问页面的顺序时：行为会更改。


导航到disclaimer.html（http）
转到home.html（ajax）
点击链接
转到disclaimer.html（ajax）
转到home.html（ajax）
点击链接


控制台输出： 

0 "pageinit"             // step 2
1 "pagebeforeshow"
2 "click pageinit"       // step 3
3 "click pagebeforeshow"
4 "pageinit"             // step 5
5 "pagebeforeshow"
6 "click pageinit"       // step 6
7 "click pagebeforeshow"


这很奇怪，因为我希望第6和第7个结果可以重复。

很抱歉很长的问题。我希望有人可以向我确切说明正在发生的事情，以及这是否是预期的行为？

tldr;您在哪里侦听jQueryMobile中的（单击）事件？

最佳答案

简而言之：在jQueryMobile中，您应该在pageinit内监听（绑定）事件；这等效于（或多或少）jQuery的ready事件。这就是jQueryMobile成员的建议。

一旦页面被加载和初始化（通过AJAX或HTTP），就会触发pageinit，但是如果页面已经在DOM中（例如，在关闭jQueryMobile对话框之后），可能会多次触发pagebeforeshow。每次重新显示页面时，您在pagebeforeshow上绑定的所有内容都会重新绑定。这就是为什么您必须先单击两次单击页面的原因。

编辑：您的测试说明

我复制了您的2个html页面和js文件，并在两个测试中都重复了所有步骤。

在您的第一个测试中，您具有：


导航到home.html（http）：绑定（通过委派文档）并触发pageinit和pagebeforeshow（日志0和1），因为您的页面已初始化并将要显示。这还将其他两个功能绑定到链接（重要：在这种情况下，不是委派，而是直接绑定！）。这是该测试中唯一要加载和执行“ events.js”的时间。
单击链接：这将按预期执行click pageinit和clickbeforeshow（日志2和3），因为步骤1。
转到disclaimer.html（ajax）：这不会显示任何日志。
转到home.html（ajax）：由于“ home.html”仍在DOM中，因此会触发pagebeforeshow，如您在日志（4）中所看到的。这也执行链接中的绑定。注意：我怀疑在此步骤中，“ disclaimer.html”已从DOM中删除（第二次测试中对此有更多介绍）。
单击链接：显示树日志，由于步骤1，显示前两个日志，由于步骤4，显示最后一个（重复的）日志。


在第二项测试中，您需要：


导航至disclaimer.html（http）：它绑定了pageinit和pagebeforeshow，但是由于未触发任何事件，因此不会显示日志。这两个事件都被绑定到document（由委托），因此，如果特定页面不在DOM中，则没有关系。这是该测试中唯一要加载和执行“ events.js”的时间。
转到home.html（ajax）：触发pageinit和pagebeforeshow，您可以看到日志0和1。当两个事件都被触发时，相应的click事件将被绑定到链接（直接绑定！）。
单击链接：此步骤按预期显示日志2和3。
转到disclaimer.html（ajax）：日志中未显示任何内容...，但：jQueryMobile决定应从DOM中删除“ home.html”！那是因为一旦您导航到另一个页面，JQM就会删除每个页面。请注意，“ disclaimer.html”永远不会从DOM中删除，因为他是DOM的“所有者”。
转到home.html（ajax）：如日志4和5所示，此步骤触发pageinit和pagebeforeshow（因为两个事件仍绑定到文档对象），这将两个函数绑定到链接，就像步骤2中一样，但是...（请参阅下一步）
单击链接：您在这里说：“我希望第6和第7个结果能够重复”；好吧，它们没有被复制，因为整个页面（包含链接的div）及其从DOM中删除的所有内容，以及直接绑定到链接的第一个单击事件（在步骤2中）都消失了！因此您只能在步骤5中看到由绑定引起的日志。


如果我（最终）理解了JQM事件的工作原理，那么（通过完整的HTTP请求）加载的第一页将保留在DOM中，直到用户导航到外部页面或重新加载页面（通过F5或CTRL + R）。其他任何页面（通过AJAX加载）都被添加到“主” DOM中，然后在导航到另一页面时从中卸载/删除。因此：如果在pageinit中进行所有绑定（直接绑定或最多委派给其父div [data-role：page]），则无需担心重复的事件绑定。

PD：如果您发现我的写作方式有些怪异，可能是因为我不习惯用被动语态讲英语/写英语，有时我会混淆介词：P

关于jquery-mobile - JQueryMobile监听点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13754818/

25 4 0
文章推荐： python - 使用 max 函数时返回的值不正确
文章推荐： java - 客户端/服务器通信 - 猜我的动物游戏
文章推荐： Python 类型错误 : 'int' object is not iterable despite proper assignment
文章推荐： asp.net-mvc - 仅在 mvc 6 中将值从 EditorTemplate 传递给其布局模板
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com