CODEWITHSUNDEEP
jquerydomjquery-plugins
Dan Denney
Dan Denney

Reputation: 300

How to jQuery plugin effects to items created later in the DOM

How do I apply jQuery plugin effects to items that are created by an event?

So, what I am attempting to do is have all uls throughout a site use the jquery.scroll.js plugin for styling. I currently have it working on all active uls. However, there are some category/subcategory sections. I am still new to writing any jQuery on my own and there is a leap in logic that I don't understand on applying plugins to items when they are loaded later.

In the real example, users click a category from a ul and a sub category is loaded via Rails and JSON. For a light sample, I made a jsfiddle that simulates the issue that I run into.

The category ul is styled correctly, but the subcategory ul doesn't pick up the styling. I'm hoping for some assistance not just in whipping up some code to fix it, but in pointing me in the direction of what I need to learn for this functionality.

http://jsfiddle.net/dandenney/25R8F/1/

Thank you in advance!

Upvotes: 0

Views: 91

Answers (2)

German Rumm
German Rumm

Reputation: 5832

You can also use livequery plugin to fire up a function when element appears on the page.

http://jsfiddle.net/25R8F/4/

added alerts and removed hidden select to better illustrate how it works http://jsfiddle.net/25R8F/6/

Upvotes: 0

brildum
brildum

Reputation: 1799

After you dynamically add the ul elements to the DOM, initialize the plugin.

For example:

$.loadLists({
    success: function(html) {
        $("#someElement").html(html);
        $("#someElement ul").plugin();
    }
});

Upvotes: 3

Related Questions