我是开发新手，我正在努力完成我的第一个JQM网站。但是，我的搜索输入表单需要在提交之后刷新手动页面，然后才能显示安全保护的照片。无论我尝试什么，我都无法工作。我还发现，当我从加载中删除JQM时，它工作得很好。为什么每个版本的JQM都会破坏我的搜索？一切都在网站的桌面版本上完美运行。
http://www.instacuteness.com/mobile/
这是关于jsfiddle的代码：
www.jsfiddle.net/xS8eY/4/
有人可以帮忙！
答案 0 :(得分：1)
初始页面的标识为index。提交表单时，将在DOM中创建具有相同标识index的第二页。结果是您在DOM中拥有相同的页面，不止一次。
因此，即使执行了instafeed脚本，它也会将照片显示为隐藏的第一页，而不是屏幕上显示的活动页面。
在<div data-role="page" id="index">
$(document).on('pagehide', '#index', function(event, ui){
$(event.target).remove();
});
此script将从DOM中删除最后一页。但请注意，有更优雅的解决方案。
最后，jQuery Mobile 1.2支持最新版本的jQuery核心1.8.2。
<!DOCTYPE html>
<html>
<head>
<title>Instacuteness: The Cutest Animals on Instagram, Viewable on the Web!</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<link href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" rel="stylesheet">
<script src="instafeed.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="index">
<script type="text/javascript">
$(function(){
$('#nospace').bind('keyup', function(){
var value = $(this).val()
$(this).val(value.replace(/\s+/g, ''));
});
});
</script>
<script type="text/javascript">
function getUrlVars() {
var vars = {};
var parts = (($(this).data("url") && $(this).data("url").indexOf("?") > 0)
? $(this).data("url")
: window.location.href ).replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>
<script type="text/javascript">
$(document).on('pagehide', '#index', function(event, ui){
$(event.target).remove();
});
function goToPage()
{
var initial = "http://www.instacuteness.com/mobile/";
$("#test").attr("href", initial+url);
window.location(initial+url);
}
</script>
<script type="text/javascript">
$(document).one('pageshow', '#index', function() {
var urlParams = getUrlVars();
var tag = typeof urlParams["id"] === 'undefined' ? 'pets' : urlParams["id"];
//console.log(tag);
var feed = new Instafeed({
get: 'tagged',
tagName: tag,
clientId: '3d0a5cba5a524ff7bf81d100c382ab40',
template: '<a href="{{link}}"><img src="{{image}}" /><\/a>',
resolution: 'low_resolution',
limit: '60'
});
feed.run();
});
</script>
<header data-role="header">
<div data-role="fieldcontain">
<form action="" class="form-search" id="input" name="input">
<input id="nospace" name="id" placeholder="Search for a tag..." type="text"
value="">
</form>
</div><br>
</header>
<div data-role="content">
<p><img src="Images/logo.png"></p>
<p><a data-role="button" data-theme="a" href="#about">About Instacuteness</a></p>
</div>
<div data-collapsed="true" data-collapsed-icon="plus" data-expanded-icon="minus" data-role=
"collapsible">
<h3>Choose a Tag</h3>
<p></p>
<ul data-role="listview">
<li>
<a href="index.html?id=pets" rel="external">All Pets</a>
</li>
<li>
<a href="index.html?id=puppy" rel="external">Puppy</a>
</li>
<li>
<a href="index.html?id=kitten" rel="external">Kitten</a>
</li>
<li>
<a href="index.html?id=bunny" rel="external">Bunny</a>
</li>
<li>
<a href="index.html?id=horse" rel="external">Horse</a>
</li>
<li>
<a href="index.html?id=parrot" rel="external">Parrot</a>
</li>
<li>
<a href="index.html?id=giraffe" rel="external">Giraffe</a>
</li>
<li>
<a href="index.html?id=kangaroo" rel="external">Kangaroo</a>
</li>
<li>
<a href="index.html?id=koala" rel="external">Koala</a>
</li>
<li>
<a href="index.html?id=panda" rel="external">Panda</a>
</li>
<li>
<a href="index.html?id=lion" rel="external">Lion</a>
</li>
<li>
<a href="index.html?id=tiger" rel="external">Tiger</a>
</li>
<li>
<a href="index.html?id=bear" rel="external">Bear</a>
</li>
<li>
<a href="index.html?id=elephant" rel="external">Elephant</a>
</li>
<li>
<a href="index.html?id=hippo" rel="external">Hippo</a>
</li>
<li>
<a href="index.html?id=zebra" rel="external">Zebra</a>
</li>
<li>
<a href="index.html?id=fox" rel="external">Fox</a>
</li>
<li>
<a href="index.html?id=cow" rel="external">Cow</a>
</li>
<li>
<a href="index.html?id=owl" rel="external">Owl</a>
</li>
<li>
<a href="index.html?id=deer" rel="external">Deer</a>
</li>
<li>
<a href="index.html?id=penguin" rel="external">Penguin</a>
</li>
<li>
<a href="index.html?id=clownfish" rel="external">Clownfish</a>
</li>
</ul>
<p></p>
</div><br>
<div id="instafeed"></div><br>
<footer data-role="footer">
<h2>© footer here.</h2>
</footer>
</div>
<div data-role="page" id="about">
<header data-role="header">
<h1>About Instacuteness</h1>
</header>
<div data-role="content">
<p>Instacuteness is an open-source project coded by Katy Marques. Instacuteness
integrates the most recently tagged animal pictures on Instagram in order for you to
view them on the web. There are several popular tags on the home page that are viewable
with a single click, or you can use the handy search box to see photos of any tag that
you'd like!</p><a href="https://github.com/KatyAverill"><img src="Images/Octocat.png"
width="200px">
<div class="caption">
Click here to check out my GitHub!
</div><br></a><br>
<p>Head <a data-rel="back" href="#index">back</a> to Instacuteness.</p>
</div>
</div>
</body>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-42028707-1']);
_gaq.push(['_setDomainName', 'instacuteness.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</html>
我希望这会有所帮助。