jQuery : A Little confused with literal object approach
<p>Is my third day with Javascript and jQuery and I´m playing a little with Literal Object structure to make the code more legible and modificable. ok. The problem...</p>

<p>I have written a script to insert dinamically inputs to a form and a button to display the content of inputs. Example:</p>

<pre><code>jQuery('#add').click(function(){
   jQuery('#opts').append('&lt;li&gt;&lt;input type="text" name="i" value="i" /&gt;&lt;/li&gt;');
});

jQuery('#view-list').click(function(){
    $itemsList = jQuery('#opts :input');
    console.log('there are ' + $itemsList.length + ' items');
    $itemsList.each(function(){
        console.log(jQuery(this).val());
    });
});
</code></pre>

<p>It works correctly, the "add" button inserts items and click button displays items.</p>

<p>The problem is when I take an approach to Literal Object. For example in a big app, this script it will be a little part of it. In this case i make it like this:</p>

<pre><code>var sidebarManager = {

init : function(){
    sampleFunction0();
    sampleFunction1();
    sampleFunction2();  
},

sampleFunction0 : function(){

    jQuery('#add').click(function(){
        jQuery('#opts').append('&lt;li&gt;&lt;input type="text" name="insert" value="insert" /&gt;&lt;/li&gt;');
    });

    jQuery('#view-list').click(function(){
        $itemsList = jQuery('#opts :input');
        console.log('there are ' + $itemsList.length + ' items');
        $itemsList.each(function(){
            console.log(jQuery(this).val());
        });
    });

},

sampleFunction1 : function(){ //code },

sampleFunction2 : function(){ //code }

}

jQuery(document).ready(function(){
    sidebarManager.init();
});
</code></pre>

<p>But in this case the list button only display the items who are on the list when the function is called via init function. If added new items, these are not displayed.</p>

<p>I'm interested in the use of literal objects and encapsuled solutions but I´m littel confused :P</p>

<p>Any advice, sugestion, WTF, or whatever... :)
Thanks.</p>

<h2>Edited</h2>

<p>what happens in the situations with 2 ambiguous <code>this</code>? For exampe:</p>

<pre><code>sampleFunction0 : function(){
    jQuery('#add').click(function(){
        jQuery('#opts').append('&lt;li&gt;&lt;input type="text" name="insert" value="insert" /&gt;&lt;/li&gt;');
    });

    jQuery('#view-list').click(function(){
        var $itemsList = jQuery('#opts input');
        console.log('there are ' + $itemsList.length + ' items');
        $itemsList.each(function(){
            console.log(jQuery(this).val());
            var test = this.sampleFunction1(); //conflict
        });
    });
},
</code></pre>

<p>In this case is necesary call fuction1 like this:</p>

<pre><code>sidebarManager.sampleFunction1();
</code></pre>
