title: edit in place with jQuery selecting newly inserted elements
body: <p>I am trying to write my own edit-in-place using jQuery. My code is something like this;</p>
  
  <pre><code>$(".comment-edit").bind({
      click: function(){
          commentId = $(this).parent().parent().attr("id");
          commentEditable = $("#"+commentId+" .comment-text");
          if (commentEditable.hasClass('active-inline')) {
              alert("already editable aq");
              return false;
          }
          contents = $.trim($("#"+commentId+" .comment-text").text());
          commentEditable.addClass("active-inline").empty();
          var editBox = '&lt;textarea id="newComment"cols="50" rows="6"&gt;&lt;/textarea&gt;&lt;button class="newCommentSave"&gt;Save&lt;/button&gt;&lt;button class="newCommentCancel"&gt;Cansel&lt;/button&gt;';
          $(editBox+" textarea").val(contents).appendTo(commentEditable).focus();
  
          $.(".newCommentSave").live({
              click: function(){
                  alert("Save");
                  return false;
              }
          });
  
          $.(".newCommentCancel").click(function(){
              alert("Cancel");
              return false;
          });
          return false;
      }
  });
  </code></pre>
  
  <p>As you can see I tried both "live()" and "click()" for interacting with the newly created buttons. However this doesn't work. </p>
  
  <p>I am getting XML filter is applied to non-XML value <code>(function (a, b) {return new (c.fn.init)(a, b);})</code></p>
  
  <p>Any ideas? What seems to be going wrong?</p>
  
  <p>Edit:
  Html looks something like this: </p>
  
  <pre><code>&lt;div class="comment" id="comment-48"&gt;
    &lt;div class="comment-author"&gt;
      &lt;a href="/profil/defiant"&gt;defiant&lt;/a&gt;
      &lt;span class="date"&gt;2010-11-09 01:51:09&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="comment-text"&gt;Comment Text....&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>