Click detection on document's added element
<p>I am using currently on my page script which one of it's elements is adding and clicking on different elements like text, divs and images.</p>

<p>At the beginning everything is hide using jQuery hide method and only one input is shown. If everytjing is correct then the rest is shown - and now you can add new elements. In my html documentI am using method which looks like this:</p>

<pre><code>$(document).ready(function() {
          hideUnused();
          $('#file_upload').uploadify({
            //all stuff from uploadify &lt;- not important now
          })
          document.onclick = function (evt) {
            ClickDocument(evt); //&lt;- important now
           };})
</code></pre>

<p>And it works great for everything that is on page at the beginning, but when I am adding new elements (simply append child method) it looks like they are out of the DOM tree which ClickDocument method sees.</p>

<p>And it is ClickDocument method:</p>

<pre><code>function ClickDocument(e){
    e = e || event;   
    var target = e.target || e.srcElement;
    alert(target.nodeName);
    return;
}
</code></pre>

<p>It is extremly simple to test it only.
So does anyone have got any idea what I can do with it?</p>

<p>Oh I've forgot to mentioned one thing - I've been testing live events <a href="http://api.jquery.com/live/" rel="nofollow">http://api.jquery.com/live/</a> but it doesn't fit to my expectations. It doesn't work with show/hide methods.</p>

<p>Thank you very much for attention and help.</p>

<p><strong>EDIT:</strong></p>

<p>As I've been sugested I've used <code>.delegate()</code> method in two different ways. Both changed the old html code from 
<code>$(document).ready(function()</code>
into
<code>$("body").delegate(".kElement","click", function(evt){</code> as my class elements that I want to have extra actions on click is kElement.
So The first one looks like that:</p>

<pre><code>$("body").delegate(".kElement","click", function(evt){
               e = evt || event;   
                var target = e.target || e.srcElement;
                alert(target.nodeName);

           })
</code></pre>

<p>and the second looks like that:</p>

<pre><code>$("body").delegate(".kElement","click", function(evt){
               ClickDocument(evt);                
           })
</code></pre>

<p>So it should show alert when I click on my object, but it doesn't. What am I doing wrong?</p>
