Functions for returned values from ajax?
<p>Basically, I tried to code the following. (note that I am a newbie in jQuery, trying to learn.)</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"&gt;&lt;/script&gt;

&lt;style&gt;
    img.box:hover { opacity: 0.4; }
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
jQuery(document).ready(function() 
{
  $(".box").click(function(event){
      $.post("./itemdrop.php", { id: "Item:1" }, function(data){
            $('#box').append(data);
         }
      );
  });

  $("li").click(function(event){
     $(".box").append("clicked");

  })
});
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div id="box"&gt;
    &lt;img class="box" src="./img/box.jpg" width="150" height="150"&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>It should work like this:</p>

<ol>
<li>User clicks on "box" image, jQuery gets values from itemdrop.php</li>
</ol>

<p><strong>The returned value is <code>&lt;li class="item"&gt;Shield of Walmar&lt;/li&gt;</code></strong></p>

<p>However, the jQuery doesn't act when I click on Shield of Walmar. (I somehow have a feeling that the document ready function at top causes it.)</p>

<p>How can I solve this?</p>
