jQuery Mobile 1.4页面多页onpagecreate管理，以避免两次触发 [英] jquery mobile 1.4 page multipage onpagecreate management to avoid double triggers fires
问题描述
有人可以清除多页中事件处理程序的用法吗?文档很好，但不要警告您将它们混合在一起可能会发生的冲突.
Can someone clear out the usage of event handlers in multipage? Documentation is good but don't warn about the possible conflicts that may arise if you mix the things.
例如，作为一个新手，我注意到如果将事件处理程序放置在此html结构中，则会引发双重触发，这是由遵循(或此时忽略)文档的逻辑产生的:
For example, as a newbie I noticed that I get double fire triggering if I place my event handlers in this html structure, that comes out from the logic following (or at this point overlooking) the docs:
<body>
<div data-role="panel" id="panel">...</div>
<div data-role="page" id="page1" data-title="myhomePage">...</div>
<div data-role="page" id="page2" data-title="products">...</div>
<div data-role="page" id="page3" data-title="settings">...</div>
</body>
在my.js中使用以下代码，其中所有处理程序都位于全局页面中(如doc示例所示并从中复制).
with the following code in the my.js where all the handlers are in the global page (as shown and copied from the doc examples).
$(document).on('pagecreate' ,function(){...event handlers for buttons etc...}); //for the body // ( which is for me actually wrong!!!)
$(document).on('pagecreate', '#page1' ,function(){...}); //for home page
$(document).on('pagecreate', '#page2' ,function(){...}); //for product page
现在，我有了一个直觉，并通过删除全局onpagecreate并标记了page1内的所有事件处理程序，在试错过程中找到了解决方案.
Now, I had an intuition and found a solution in the middle of the try and error by removing the global onpagecreate and markup all the event handlers inside page1.
所以现在在Javascript中，我只有:
So now in the Javascript I have only:
$(document).on('pagecreate', '#page1' ,function(){...all my event handlers here...});
//for home page
$(document).on('pagecreate', '#page2' ,function(){...generateLists()...});
//for the product page
我为之奋斗了几天的所有双重事件都消失了.
And all double events that I was struggling with for days are gone.
但是仍然不确定我的方法是否正确，因为我想念文档中的一些真实可靠的示例.
But still unsure if I am on the right way as I miss some real solid examples, from the doc.
我也抱怨API文档方法中的示例.我几乎不了解大多数示例.它们全都基于抽象概念，而不是基于Web应用程序或页面上通常存在的真实事物，这确实使整个学习过程变得复杂(至少对我来说如此).
I also have a complain about the examples in the API documentation methods. I hardly understand the majority of the examples. They are all based on abstract concepts, not on something real usually found on a web app or page, which is really complicating the whole learning process (at least for me).
推荐答案
如果您有必须完成的任务以及其他基于页面类型的任务，则可以这样实现:
If you have tasks that always have to be done, and others based on the page type, you could achieve it like this:
$(document).on("pagecreate", "div[data-role=page]", function(event){
// Every time a page is being created
if ($(this).attr("id") == "page1") {
// Only when on #page1
}
});
这里的
$(this)是触发了创建事件的页面，因此您可以使用它来进行自我操作；最好使用div[data-role=page]作为选择器将处理程序仅附加到具有data-role=page
$(this) in here is the page on which the creation event has been fired, so you can use it to manipulate itself; it's better to use div[data-role=page] as selector to attach the handler only to divs that have data-role=page
这篇关于jQuery Mobile 1.4页面多页onpagecreate管理，以避免两次触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
