Question

So I’m having a bit of html code that I’m appending with the jQuery method .appendTo(), and after that there’s a jQuery plugin running on that html :

$(str).appendTo(target);
    self.initiate_jpages_plugin(self.cluster_public_classes.items_navigation, {
        containerID: self.cluster_public_ids.items_wrapper,
        previous: self.cluster_public_classes.previous_items,
        next: self.cluster_public_classes.next_items,
        perPage: 16,
        midRange: 8,
        animation: self.cluster_animations[17],
        links: "blank",
        keyBrowse: true,
        callback: function(pages) {
            /*var data = {
                current_page: pages.current,
                total_pages: pages.count
            }
            self.set_local_storage_data(self.local_storage_key, JSON.stringify(data));*/
        }
    });

The above is how it looks, but there are a lot of variables there that don’t quite make sense (: I’m only looking for a solution to keep the html hidden for as long as the plugin it’s not applied ( the plugin will append all of the html again ), so the best thing I could think of it’s a callback function which I know the .appendTo() method does not have.

So would there be a workaround for that ?

Answer 1

EDIT: Instead of adding an id, I’m going to add a class. $(str) could be anything and could already have an id. If you are confidant that an id will suffice, feel free to use that instead.

All I’m doing is hiding $(str) and giving it a unique class so that I can target it in the callback and show it. Is that what you were looking for?

var uniqueClass = "str" + new Date().getTime();
$(str).addClass(uniqueClass).hide().appendTo(target); 
self.initiate_jpages_plugin(self.cluster_public_classes.items_navigation, {
    containerID: self.cluster_public_ids.items_wrapper,
    previous: self.cluster_public_classes.previous_items,
    next: self.cluster_public_classes.next_items,
    perPage: 16,
    midRange: 8,
    animation: self.cluster_animations[17],
    links: "blank",
    keyBrowse: true,
    callback: function(pages) {
        $('.' + uniqueClass).show(); // show it!
        /*var data = {
            current_page: pages.current,
            total_pages: pages.count
        }
        self.set_local_storage_data(self.local_storage_key, JSON.stringify(data));*/
    }
});