making vars for elements not yet created
<p>I am trying to create a var for a dom element to clean things up but it doesn't give me expected results. The reason I think it's doing this is because the element isn't yet created when I run the function. I could move the var after the .prepend() is called but what if I'd like to keep all my vars at the top?</p>

<p>Would adding .on() somewhere in this script fix my problem or should I just move the var down a few lines after .prepend is run, and forget about keeping vars up top?</p>

<pre><code>    (function () {
        var cp = $(".call-out p")

        $('li').eq(2).prepend('hi');
        $('div.call-out').prepend("&lt;p&gt;MY UL&lt;/p&gt;");
        cp.css({
             'font-size': '3em',
             'background': 'orange'
        });
        cp.animate({
              width: "1000px",
              height: "1250px"
        });
        cp.click(function (e) {
             $(this).animate({
              width: "125px",
              height: "90px"
       });
     });
   })();
</code></pre>
