个人中心
gpt4 book ai didi

javascript - InstaFeed(搜索)和 jQuery Mobile 出现问题

转载 作者：行者123 更新时间：2023-12-01 04:52:55 26 4
gpt4 key购买 nike

我是开发新手，正在努力完成我的第一个 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>

我希望这会有所帮助。

关于javascript - InstaFeed(搜索)和 jQuery Mobile 出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17384244/

26 4 0
文章推荐： java - 如何使用 achartengine 防止图表覆盖之前的绘图
文章推荐： iOS 代码覆盖率报告包含不应该存在的文件
文章推荐： java - 通过一些 JAR 手术修复 Java 类路径问题
文章推荐： elixir - 如何使用 Ecto 的 has_many 和 cast_assoc
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com