title: Refresh DOM Jquery
body: <p>I have two input buttons on my document which are contained in a main div 'container'. </p>
  
  <p>The code i've used for them is:</p>
  
  <pre><code>&lt;input id="anotherservices" type="button" value="Add Another Service"&gt;
  &lt;input id="addmultiterms" type="button" value="Go"&gt;
  </code></pre>
  
  <p>Now when i click on the first button, i.e. the button with the value "Add Another Service", i need that both the above buttons fade out, and then an ajax request is performed. Then both the buttons get appended to the main 'container' div again.</p>
  
  <p>And this is recursive which means that when i again click on the first button which has been newly appended, again both the newly appended buttons should fade out and another set has to be apppended to the document.</p>
  
  <p>The code ive used for accomplishing this is follows:</p>
  
  <pre><code>$('#anotherservices').live("click",function(e)
  { 
  $(this).fadeOut();
  $('#addmultiterms').fadeOut();
  
  /* ajax request goes here */ 
  
  $('#container').append('&lt;input id="anotherservices" type="button" value="Add Another Service"&gt;');
  
  $('#container').append('&lt;input id="addmultiterms" type="button"  value="Go"&gt;');
  </code></pre>
  
  <p>But the second button, with the value "Go" isnt fading out because it is not being added to the dom at runtime.</p>
  
  <p>How do i accomplish this?</p>