Tumblr 无限滚动不适用于 jquery 脚本答案

【问题标题】：Tumblr infinite scroll not working with jquery scriptTumblr 无限滚动不适用于 jquery 脚本
【发布时间】：2014-11-18 12:00:32
【问题描述】：

大家好 - 我正在为 Tumblr 使用 cody sherman 无限滚动 脚本以及 jquery collapse 脚本。问题是通过无限滚动加载第 2 页后，jquery 折叠脚本从这里停止工作......？我怎样才能让两个脚本一起运行？感谢您的时间/帮助，D。

<html>
<head>
<!-- TITLE -->
<title>{block:IndexPage}dgsmigliani > Image Library{/block:IndexPage}{block:SearchPage} > {SearchQuery}{/block:SearchPage}{block:PermalinkPage}dgsmigliani > Image Library > {PostID}{/block:PermalinkPage}</title>
<!-- DESCRIPTION -->
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<!-- FAVICON, RSS, EXTERNAL CSS -->
<link rel="shortcut icon" href="http://www.dgsmigliani.com/favicon.ico"/>
<link href="{RSS}" rel="alternate" type="application/rss+xml" />
<!-- SCRIPTS -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/bqtf2yr/4a0nbxeju/jquery.collapse.js" type="text/javascript"></script>
<script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>
<!-- STYLE -->
<style>
iframe#tumblr_controls {
top: 0% !important;
right:0% !important; 
position: fixed !important;}
/* BODY */
body {
font-family: arial, sans-serif;
font-size: 14px;
margin: 30px 30px 30px 40px;
}
/* IMAGE */
img {
}
img span {
display: block;
}
/* TYPOGRAPHY */
h1 {
font-size: inherit;
}
a {
color: inherit; /* blue colors for links too */ 
text-decoration: inherit; /* no underline */
}
a:hover {
color: red;
}
/* HEADER */
#header {
font-size: inherit;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
padding-bottom: 40px;
}
.title {
display: inline;
float:left;
padding-right: 5px;
}
/* SEARCH */
.search {
display: inline;
}
input[type=text] {
font-family: inherit;
font-size: inherit;
display: block;
font-weight: bold;
letter-spacing: inherit;
text-transform: uppercase;
border: none;
padding: 0px;
margin: 0px;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
/* POST ID */
.post_id {
display: inline;
}
/* PERMALINK */
.permalink {
font-size: inherit;
line-height: 44px;
}
.permalink p {
display: inline;
padding-right: 15px;
}
.permalink img {
display: block;
}
</style>
</head>

<body>
{block:IndexPage}
<div id="header">
<div class="title">Daniel Smigliani > Image Library ></div>
<div class="search"><form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" placeholder="search"/></form></div>
</div>
<div id="posts">
{block:Posts}
{block:Photo}
<div class="photo" data-collapse>
{block:Caption}{Caption}{/block:Caption}
<a href="{Permalink}" target="_blank"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
</div>
{/block:Photo}
{/block:Posts}
{/block:IndexPage}
</div>
{block:PermalinkPage}
<div id="header">
<div class="title">Daniel Smigliani > Image Library ></div>
<div class="post_id">{PostID}</div>
</div>
<div id="posts">
{block:Posts}
{block:Photo}
<div class="permalink">
{block:Caption}{Caption}{/block:Caption}
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
{block:Tags}<p>#{Tag} </p>{/block:Tags}
</div>
{/block:Photo}
{/block:PermalinkPage}
{/block:Posts}
</div>
</body>
</html>

【问题讨论】：

调用.collapse时不包含新添加的项。插件似乎没有追加新项目的方法，无限滚动的版本没有回调重新调用.collapse。
id 和 class 不可互换。您应该清理它 - 任何给定的 id 名称应该只出现一次，永远，在页面上，class 可以用于其他所有内容。我认为这不会解决你的问题，但它会让你的代码不那么混乱。
@lharby - javascript 插件正在完成所有工作。我听说过多个 div，但即使我在一页上只有唯一的 div，脚本仍然无法协同工作。
@mikedidthis - 我得出了和你一样的结论。一旦无限滚动开始，我需要能够回调折叠脚本。由于对javascripts的了解很少，我不知道该怎么做......
@dgsmigliani 也许看看github.com/paulirish/infinite-scroll，因为它提供了一个回调。然后你可以再次调用.collapse。

标签： jquery scroll tumblr infinite

【解决方案1】：

$(document).ready(function(){

        $('#posts').infinitescroll({
        navSelector  : "div.footer",
        nextSelector : "div.footer a:first",
        itemSelector : "#posts div.photo"

    },function(arrayOfNewElems){
        $(".photo").collapse({});
    });

});

【讨论】：