Question

could somebody please tell me how implement the hide function using on(). I’ve tried:

    $(document).on('hide','selector');
    $(document).on('selector', function(){
        $(this).hide();
    });

Would like to know how to correctly apply such a function using on();

Answer 1

The .on function is used to wire up an event to something. You aren’t telling it what even to wire up to. When do you want the element to hide? Let’s pretend you want it to hide when a button is clicked.

HTML:

<div id="a">This will hide</div>
<button id="b">Hide!</button>​

jQuery:

$(document).on('click', '#b', function() {
    $('#a').hide();
});​

If you are just trying to hide the element, not triggered by an event or anything, just call $('#a').hide(); and it will hide the element. Of course, change your selectors to work with your HTML.

Fiddle: http://jsfiddle.net/gromer/Zq756/

Edit:

Interesting. Do you have any control over the elements that are added dynamically? If so, I would add a class to the elements you want to have hidden when they’re added. Something like:

<div class="initial-hide">This div should be hidden when it's loaded.</div>

Then in your css, add this:

.initial-hide {
    dislay: none;
}

Then whenever an element is loaded with the initial-hide class, it’ll be hidden. See this updated Fiddle: http://jsfiddle.net/gromer/Zq756/1/. The Add button will illustrate how the added class will help you out.