How to access the added element in the jQuery plugin and store it in a global variable?


I'm trying slowly to move forward and create several jquery plugins which should be lightweight and do just what I need.

Now I want to make a super simple jQuery progress bar. The problem is that I can't access the element which is appended dynamically with jQuery .append().

Here is the JSFidle:

As you can see, the "children" .smk_pb_child should have a diferrent color and width, but for some unknown reason I can't make this to work.

How can I get this element in a variable and after this use it everywhere I need it?

The issue is that you are initializing the child variable before you append the child element. You need to initialize the variable within the appendChildren method after you add the smk_pb_child div:

plugin.appendChildren = function () {
     plugin.append('<div class="smk_pb_child"></div>');
     child = plugin.children('.smk_pb_child');

Working Demo