I'm trying to add a voting function to each new element within the Infinite Scroll. I managed to get the voting functions working but this doesn't work with new elements loaded when scrolling down the page.
Pastebin URL: http://pastebin.com/0eNYDXrm
I've attached my code below. Any help or advice would be appreciated...Many Thanks!
<script type="text/javascript">
$('.protected-post-form').center();
$('#content').infinitescroll({
debug: false,
loading: {},
state: {
currPage: "1"
},
nextSelector: "div.navigation a:first",
navSelector: "div.navigation",
contentSelector: "#content",
itemSelector: "#content div.post",
pathParse: ["<?php echo $_SERVER["HTTP_HOST "] . $_SERVER["REQUEST_URI "] ?>page/", "/"]
}, function() {
window.setTimeout(infinite_scroll_callback(), 1);
});
function applyvote(elements) {
$(elements).each(
$(".vote a").click(
function() {
var some = jQuery(this);
var thepost = jQuery(this).attr("post");
var theuser = jQuery(this).attr("user");
jQuery.post("<?php bloginfo('template_url'); ?>/vote.php", {
user: theuser,
post: thepost
}, function(data) {
var votebox = ".vote" + thepost + " span";
jQuery(votebox).text(data);
});
});
});
}
$(elem).infinitescroll(options, applyvote(arrayOfNewElems));
});
</script>
$(elem).infinitescroll(options, applyvote(arrayOfNewElems));
ReplyDeleteThe second argument to .infinitescroll is a callback function. applyvote(arrayOfNewElems) is a not a function but a function call (so it evaluates to whatever is returned by your calling the function, which seems to be undefined). Use this instead:
$(elem).infinitescroll(options, applyvote);
Now you're passing a function which inifinitescroll itself will call when new content is loaded, and it will pass the new elements created.