- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
使用 2 个简单页面和 jQuery Mobile。
尝试在页面的每次加载时执行一些js。例如,第一页显示警报(1),第二页显示警报(2)。当第一次在浏览器中加载页面(或刷新 F5)时,它的行为符合预期。但是,当我使用链接从页面“一”导航到页面“二”时,警报(2)不会显示。
我想在每次加载时执行一些js的方式如下所述 - http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/events.html - 使用pagecreate
。
我在这里发现了一些类似的问题,但它们没有回答我所需要的。我的问题是 - 我应该改变什么才能使其正常工作?
one.html:
<!DOCTYPE html>
<html>
<head>
<title>1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
<script>
$('#divTestEvent1').live('pagecreate',function(event){
alert(1);
});
</script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="divTestEvent1">
<ul data-role="listview">
<li><a href="one.html">1</a></li>
<li><a href="two.html">2</a></li>
</ul>
</div><!-- /page -->
</body>
</html>
<小时/>
两个.html
<!DOCTYPE html>
<html>
<head>
<title>2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
<script>
$('#divTestEvent2').live('pagecreate',function(event){
alert(2);
});
</script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="divTestEvent2">
<ul data-role="listview">
<li><a href="one.html">1</a></li>
<li><a href="two.html">2</a></li>
</ul>
</div><!-- /page -->
</body>
</html>
最佳答案
您应该能够仅使用一个 .live('pageinit') 自动执行此操作,如下所示。
$('[data-bind="pageinit"]').live('pageinit', function (event) {
alert( $('[data-role="page"]').attr('id') );
});
当使用属性data-bind='pageinit'
时,这将自动绑定(bind)页面。警报应向您显示页面的 ID,其中必须包含 data-role="page"
。
编辑2013 年 3 月 1 日
看到其他问题被投票通过的代码无疑需要重复代码,我想更新我的答案:在 jQuery Mobile 初始化之前输入上述代码。每个页面都会在第一次加载时绑定(bind)(因此在 pageinit
事件中。您可以在 header 中进行如下设置:
<script src="Scripts/latestJQuery.js" type="text/javascript"></script>
<script src="Scripts/jQueryMobileDefaults.js" type="text/javascript"></script>
<script src="Scripts/latestJQueryMobile.js" type="text/javascript"></script>
上面的代码包含在默认页面中。这将使它在第一次执行时在加载的页面第一页上触发。与为每个单独页面使用不同的数字标识符重复代码相比,此设置将为您提供更清晰的设置。
也可以简单地更改可使用此功能的事件。对于所有事件,请检查 jQueryMobile documentation ,但例如: pageinit
在页面初始化时被触发,因此只有在第一次加载时,pageshow
才会在每次加载页面时被触发。
关于jQuery 移动 : pagecreate event does not fire when navigating from page to page,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8171251/
我是 React Native 的新手,目前正在研究 React Native Navigation Docs 。我想知道:navigation.push() 和 navigation.navigat
来自 this和 this , 我了解到 navigation.navigate() 之间存在有意义的差异和 navigation.push() .尽管如此,我仍然想知道我是否可以使用 navigat
我正在使用 react-navigation 3.6.1 和 react-native-camera 2.2.2。当我拍照时,进入下一个屏幕的按钮在第一次按下时没有任何作用。必须按多次 这是针对 io
androidx.navigation:navigation-ui 和 android.arch.navigation:navigation-ui-ktx 有什么区别? 当我在我的 gradle 中使
使用 TypeScript 时,react-navigation 中发生的一个常见错误是: Argument of type 'string' is not assignable to paramet
我有一个使用 React Native 的应用程序,我正在使用 react-navigation (5.2.9)。 我构建了一个 Stack.Navigator,我有我的屏幕,但我希望页脚组件在外面,
我有一个组件在 NavigationContainer 组件内但在 Stack Navigator 之外。我能知道组件中的当前路由是什么吗?我不能使用 useRoute Hook ,因为它出错了: C
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题?更新问题,使其仅关注一个问题 editing this post . 3年前关闭。 Improve this questi
我正在学习 react-native 导航 https://reactnavigation.org/docs/intro/ 。我在那里的例子中看到 class HomeScreen extends R
我在我的 native 项目中使用 eslint airbnb。如果我没有验证 Prop ,特别是来自 react-navigation 的 Prop ,eslint 会抛出错误 linting .
在我的应用程序中,我有 6 个不同的页面。 有 1 个页面称为“收藏夹页面”,其中列出了用户选择的收藏夹。它们由一列显示,该列使用来自另一个类的列表。列表代码如下: List favoriteCo
我在 react 导航问题部分看到很多人使用 this.props.navigation.dispatch 以编程方式导航。是否有任何特定原因或用例需要在 this.props.navigation.
我在 vue.js 中开始了一个新元素。我添加了导航栏。有一次,我注意到控制台中有问题: Audit usage of navigator.userAgent, navigator.appVersio
首先,是的,我知道有很多与此问题相关的答案,但我发现了这种在 react-native 0.60 中进行导航的特定方法,问题是,我还没有弄清楚,而且我不想刮掉这个导航方法来测试不同的方法,这是导航文件
react 导航 5 我在 TabNavigator 内部构建了一个 StackNavigator,并且主屏幕和其他屏幕之间的导航正在工作。但问题是,当我从 Tab2 移动到 Tab1 时,我希望 T
我正在尝试在 react-native with expo 中使用 react-navigation-redux-helpers 将 redux 与 react-navigation 集成。但是,尽管
我正在尝试使用最新的 react-navigation 版本运行我的应用程序但无法正常工作。也尝试使用此解决方案 ( Invariant Violation: The navigation prop
我正在尝试使用 React Navigation 和 StackNavigator 在我的应用中导航。 我有一个带有 onPress={() => navigate('DetailsScreen'
我在我的应用程序中使用 react 导航。如果我从 screen A 导航到 Screen B,如果转换完成,我如何获得一些反馈。 最佳答案 从 'react-native 导入 { Interact
我遵循的是身份验证流程 (https://reactnavigation.org/docs/en/auth-flow.html) 上的 React 导航指南,但略有不同。我在 LoginScreen
我是一名优秀的程序员,十分优秀!