Javascript InstaFeed（搜索）和jQuery Mobile出现问题
我是开发新手，我正在努力完成我的第一个JQM站点。但是，我的搜索输入表单需要在提交后手动刷新页面，然后instafeed照片才会显示。不管我怎么努力，我都不能让它工作。我还发现，当我从加载中删除JQM时，它工作得很好。为什么JQM的每个版本都会破坏我的搜索？在网站的桌面版上，一切都能完美运行 以下是我在JSFIDLE上的代码：Javascript InstaFeed（搜索）和jQuery Mobile出现问题,javascript,jquery,instagram,jquery-mobile,Javascript,Jquery,Instagram,Jquery Mobile,我是开发新手，我正在努力完成我的第一个JQM站点。但是，我的搜索输入表单需要在提交后手动刷新页面，然后instafeed照片才会显示。不管我怎么努力，我都不能让它工作。我还发现，当我从加载中删除JQM时，它工作得很好。为什么JQM的每个版本都会破坏我的搜索？在网站的桌面版上，一切都能完美运行 以下是我在JSFIDLE上的代码： www.jsfiddle.net/xS8eY/4/ 有人能帮忙吗 初始页面具有id索引。提交表单时，将在DOM中创建第二个页面，该页面具有相同的id索引。结果是您在D
www.jsfiddle.net/xS8eY/4/
有人能帮忙吗 初始页面具有id
索引索引instafeed脚本将从DOM中删除最后一页。但是请注意，还有更优雅的解决方案
最后，jquerymobile1.2支持jquerycore1.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>
不稳定性：Instagram上最可爱的动物，可在网上查看！
$（函数（）{
$（'#nospace'）.bind（'keyup'，function（））{
var值=$（this.val（）
$（this.val（value.replace（/\s+/g'）；
});
});
函数getUrlVars（）{
var vars={}；
var parts=（$（this.data（“url”）和&$（this.data（“url”）.indexOf（“？”）>0）
？$（此）.数据（“url”）
：window.location.href）.替换（/[？&]+（[^=&]+）=（[^&]*）/gi，函数（m，键，值）{
变量[键]=值；
});
返回变量；
}
$（文档）.on（'pagehide'，'#index'，函数（事件，用户界面）{
$（event.target）.remove（）；
});
函数goToPage（）
{
变量初始值=”http://www.instacuteness.com/mobile/";
$（“#测试”）.attr（“href”，首字母+url）；
窗口位置（初始+url）；
}
$（document）.one（'pageshow'，'#index'，function（）{
var urlParams=getUrlVars（）；
var tag=typeof urlParams[“id”]=“未定义”？“pets”：urlParams[“id”]；
//控制台日志（标签）；
var feed=新Instafeed({
得到：“标记”，
标记名：tag，
客户ID:'3D0A5CBA524FF7BF81D100C382AB40'，
模板：'
选择一个标签
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
©此处为页脚。
关于不稳定
Instacuteness是一个由Katy Marques编写的开源项目
在Instagram上集成最近标记的动物图片，以便
在网页上查看。主页上有几个可查看的常用标签
只需单击一下，或者您可以使用方便的搜索框查看任何标记的照片
你会喜欢的！
走向不稳定
var _gaq=_gaq | |[]；
_gaq.push（[''设置帐户'，'UA-42028707-1']）；
_gaq.push（“setDomainName”，“instacuteness.com”）；
_gaq.push（[''u trackPageview']）；
（功能（）{
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）；
})();
我希望这能有所帮助。请发布您的代码，或者在上面重现问题。它可以在iPad上运行，无需刷新。但是，如果JQM图标宽度有问题，您需要将JQM图标放置在JQM CSS文件的/images/
下。我修复了JQM图标，并将其添加到JSFIDLE中：非常感谢您解决了duplic的问题ate页面存储在DOM中。但是，它现在显示的是上一次搜索的照片，而不是执行的搜索。您知道如何
<!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>