我是开发新手，我正在尝试完成我的第一个 JQM 站点。但是，我的搜索输入表单需要在提交后手动刷新页面，然后才会显示 instafeed 照片。无论我尝试什么，我都无法让它工作。我还发现，当我从加载中删除 JQM 时，它工作得很好。为什么每个版本的 JQM 都会破坏我的搜索？一切都在网站的桌面版本上完美运行。
http://www.instacuteness.com/mobile/
这是我在 jsfiddle 上的代码：
www.jsfiddle.net/xS8eY/4/
有人可以帮忙吗！
初始页面有 id index。当您提交表单时，会在 DOM 中创建具有相同 id 的第二个页面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 core 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>
我希望这有帮助。