如何防止使用jQuery Mobile将链接添加到历史记录堆栈中 [英] How do I prevent a link from adding to the history stack with jQuery Mobile
问题描述
我使用jQuery mobile,正在使用带有上一页和下一页链接的列表视图进行分页.一切正常,但我不希望将上一页和下一页添加到历史记录堆栈中.这个想法是,回击将只转到实际的上一页.
Using jQuery mobile, I am using a list view with a previous and next links for pagination. Everything works fine, but I do not want the prev and next pages to add to the history stack. The idea is that hitting back will just go to the actual previous page.
我发现要做的唯一一件事就是将data-rel ="dialog"添加到a标签,但是我不希望它成为弹出对话框.
The only thing I have found to do this is to add data-rel="dialog" to the a tags, but I don't want it to be a pop-up dialog.
否则我尝试添加
$.mobile.nonHistorySelectors="dialog,pagination"
到mobileinit事件,并将属性data-rel ="pagination"添加到a标签.但这只会在单击链接时引发错误(即使未将nonHistorySelectors添加到mobileinit事件中,也会发生此错误).
to the mobileinit event, with the attribute data-rel="pagination" added to the a tag. But this only throws errors when the links are clicked (the error also occurs even without the nonHistorySelectors added to the mobileinit event).
我找到的最接近的东西是这个JS
The closest thing I have found is this JS
<script type="text/javascript">
$(".page-prev").click(function(e) {
e.stopPropagation();
e.preventDefault();
$.mobile.changePage(this.href, {changeHash:false, reverse:true});
});
$(".page-next").click(function(e) {
e.stopPropagation();
e.preventDefault();
$.mobile.changePage(this.href, {changeHash:false});
});
</script>
和此HTML
<a href="/blog?page=1" class="page-prev" data-role="button" data-icon="arrow-l">Prev</a>
<a href="/blog?page=3" class="page-next" data-role="button" data-icon="arrow-r">Next</a>
这似乎很不错,可以防止浏览器的历史记录被更新,但是有时单击下一步"时,页面滑动会做一些时髦的事情,例如加载/滑动两次.另外,它做不到的一件事是,如果我要从此处导航到某个页面并返回,它将回到第1页.
This seems to do well to keep the browsers history from being updated, but sometimes when click next the pages sliding around will do some funky things, such as loading/sliding twice. Plus one thing that it fails to do is that if I were to navigate to a page from here and come back, it will be back at page 1.
推荐答案
执行此操作应该没问题:
Do this and it should be fine:
// Fix for back buttons
$(document).on('vclick', '[data-rel=back]', function(e) {
e.stopImmediatePropagation();
e.preventDefault();
// $.mobile.back(e);
var back = $.mobile.activePage.prev('[data-role=page]');
$.mobile.changePage(back, {
transition: 'slide',
reverse: true,
changeHash: false
});
});
这篇关于如何防止使用jQuery Mobile将链接添加到历史记录堆栈中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!