Selecting a class from appended element with jQuery
<p>I'm creating an inline edit input['text'] snippet with jQuery.</p>

<p>the html will be like this : </p>

<pre><code>&lt;div id="inline"&gt;
    &lt;span class="item"&gt;Color&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>I got stuck in here (here is my code) :</p>

<pre><code>$('.item').each(function(){
  $(this).click(function(){
  $(this).hide();
  $(this).parent().append(
   '&lt;form method="post" action="" id="inline_form"&gt;'+ 
   '&lt;input type="text" value="'+ $(this).html() +'"&gt; &lt;input type="Submit" value="update" /&gt;'+ 
   ' &lt;a href="#" class="cancel"&gt;Cancel&lt;/a&gt;&lt;/form&gt;'
  );
 });
 });
</code></pre>

<p>I want to bind a click event to class '.cancel' that I've appended above , so when I click cancel, it will remove the form '#inline_form' and show back '.item'</p>

<p>I tried this </p>

<pre><code>$('.cancel').each(function(){
  $(this).click(function(){
  $(this).parent('#inline').find('.item').show();
        $(this).parent('#inline_form').remove();
 });
 });
</code></pre>

<p>But it didn't work.
How do I select '.cancel' so I can put a click event on it ??? </p>
