How to reference $(this) with .ready()

Question

I'm working with Tumblr documentation to make it so when the page theme loads a certain post (ask posts in this case), it appends the html of that post into a separate fixed div that acts like a "chatLog" or sorts that continuously loads those posts as new messages as they show up (because infinite scrolling that continuously loads new posts is being considered here instead of pagination). Since I have infinite scrolling enabled, I can't simply use page onload or .each here, and can't figure out what to use other than $('.ask').ready()

Right now, what I have is

$(".ask").each(function() {
    var self = $(this);
    $(self).ready(
    function(){
        $("#chatLog").append($(self).html());
    });
});

but this clones instances (when I have four asks posts on the page, the first one appears 4 times, the second 3 times, the third 2 times, the fourth one time), and I'm not sure how wonkier the result will be once I enable the infinite-scrolling

and if I take out the .each, I can't reference the div objective with $(this) using just .ready()

*Note: Tumblr documentation doesn't let me simply load all the ask posts into the fixed div from the start because you can't separate ask posts from the general "posts block" consisting of all the other posts (text, photo, photoset, audio, video, etc.) too

If the .ready() you're talking about is generic jQuery, then regular DOM elements do not have .ready() capability. if you're trying to handle events from dynamically loaded elements, then you will want to use delegated event handling as described here Does jQuery.on() work for elements that are added after the event handler is created?. This allows you to attach an event handler to a common parent element and use event bubbling from dynamic elements. — jfriend00
Other references jQuery .on() method for adding a click event after loading dynamic html and JQuery Event Handlers - What's the “Best” method. — jfriend00
Not certain interpret Question correctly ? What is expected result of .ready() ? When element exists in document , call .each() on element ? — guest271314
@guest271314 the intention was that because infinite scrolling will be enabled and new instances of that class will load as you scroll, something that would re-call the function would be needed — user3597545
@guest271314 though it definitely shouldn't be nested inside .each in that case - but without .each, I wasn't sure how to reference $(this) — user3597545

mikedidthis mikedidthis · Accepted Answer · 2015-10-07T08:06:27

Note: Tumblr documentation doesn't let me simply load all the ask posts into the fixed div from the start because you can't separate ask posts from the general "posts block" consisting of all the other posts (text, photo, photoset, audio, video, etc.) too

You can filter answers from other posts types. Tumblr provides the theme operator, {block:Answer}{/block:Answer} , for dealing with questions / answers, or ask posts.

The OP has a specific requirement to move answers into there own element:

<div class="posts posts--answers">
{block:Posts}
{block:Answer}

/* Answer post markup */

{/block:Answer}
{/block:Posts}
</div>


<div class="posts">
{block:Posts}

{block:Photo}
/* Photo post markup */
{/block:Photo}

{block:Text}
/* Text post markup */
{/block:Text}

{/block:Posts}
</div>

You can filter dynamically added posts with javascript and move any new answers to .posts-answers.

Reference: https://www.tumblr.com/docs/en/custom_themes#answer-posts

How to reference $(this) with .ready()

1 Answers