title: jQuery click function vs inline onclick
body: <p>I'm trying to reorganize my code and make it more unobstrusive.</p>
  
  <p>Mainly, there is a link for performing an action. If you click on the link, the action is performed via ajax (the ajax code is not on the code here) and the text is replaced by other text, offering the user the ability of undo the action. If the user click the Undo link, ajax restore the previous situation and the text offering the user perform the action it's shown again.</p>
  
  <p>I've made a simpler version of my problem in a single html file (code below). There are two paragraphs. If you click on the link of the first paragraph, which uses inline onclick call, the code works as expected. But if you click on the link of the second paragraph, which uses jQuery onclick function, the Undo link doesn't work, and I can't figure out why.</p>
  
  <p>Any help? Thanks a lot!</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(function() {      
              $(".add2").click(function(){
                  var placeId = $(this).parents(".place").attr("id");
                  $("#" + placeId + " .add2").remove();
                  $("#" + placeId + " .actions").append("&lt;span class=\"added\"&gt;Added!&lt;/span&gt; &lt;a class=\"undoadd2\" href=\"#\"&gt;Undo&lt;/a&gt;");
                  return false;
              })
              $(".undoadd2").click(function(){
                  var placeId = $(this).parents(".place").attr("id");
                  $("#" + placeId + " .actions").find("span.added, a.add2").remove();
                  $("#" + placeId + " .actions").append("&lt;a class='add2' onclick='copyPlace(\"" + placeId + "\"); return false;' href='#'&gt;Add place&lt;/a&gt;");
                  return false;
              })
          });
  
          function addPlace(placeId){
              $("#" + placeId + " .add").remove();
              $("#" + placeId + " .actions").append("&lt;span class=\"added\"&gt;Added!&lt;/span&gt; &lt;a class=\"undoadd\" href=\"#\" onclick=\"undoAddPlace('" + placeId + "'); return false;\"&gt;Undo&lt;/a&gt;");
              return false;
          }
  
          function undoAddPlace(placeId){
              $("#" + placeId + " .actions").find("span.added, a.undoadd").remove();
              $("#" + placeId + " .actions").append("&lt;a class='add' onclick='addPlace(\"" + placeId + "\"); return false;' href='#'&gt;Add place&lt;/a&gt;");
              return false;
          }
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body id="home"&gt;
      &lt;div class="place" id="3435910"&gt;
          &lt;p class="actions"&gt;&lt;a href="#" onclick="addPlace('3435910'); return false;" class="add"&gt;Add place&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="place" id="3435912"&gt;
          &lt;p class="actions"&gt;&lt;a href="#" class="add2"&gt;Add place&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>