title: Run function after .append
body: <p>I'm having the following html code:</p>
  
  <pre><code>&lt;div&gt;
     &lt;div id="a"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When the div with id="a" is clicked, I want to replace this div with the following div:</p>
  
  <pre><code>&lt;div id="b"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I managed to create the following fiddle: <a href="http://jsfiddle.net/ucant5uy/" rel="nofollow">http://jsfiddle.net/ucant5uy/</a>
  In this fiddle, you can see that the first function (#a is clicked) runs perfect, but the second function (#b is clicked) doesn't run, because the div #b doesn't exist when the page is loaded. </p>
  
  <p>Then I decided to put the second function inside the first function: <a href="http://jsfiddle.net/ucant5uy/2/" rel="nofollow">http://jsfiddle.net/ucant5uy/2/</a>. As you can see, you can click #a once, and #b once, and then the code stops working. I want to be able to click #a and #b as many times as I would like to. I know you can achieve this with some simple CSS tricks (adding both divs to the HTML and using display:none;), but I'm wondering wether it's possible to achieve the same thing using .append(). </p>
  
  <p>Thanks in advance!</p>