title: Nesting scripts?
body: <p>I have an empty div, like this:</p>
  
  <pre><code>&lt;div id="my-content"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Then i have some jQuery, something like this:</p>
  
  <pre><code>/**IGNORE THIS**/
  function makeButton(){
      $('#my-content').html('&lt;input type="button" value="Say hey" id="my-button" /&gt;');
  }
  </code></pre>
  
  <p>So far, so good.
  Then i have this js:</p>
  
  <pre><code>$(document).ready(function(){
      makeButton();
  });
  </code></pre>
  
  <p>Works perfect, but, when i after this makes a trigger for this button, so it looks like the following, it does not respond to the button id...</p>
  
  <pre><code>$(document).ready(function(){
      makeButton();
      $('#my-button').click(function(){
          alert('Hello!');
      });
  });
  </code></pre>
  
  <p>I can of course add <code>&lt;script&gt;$(document).ready... blah... alert('Hello');&lt;/script&gt;</code> into the .html() in the makeButton function, but i guess that's not the real way to do it.</p>
  
  <p>How will i tell the JS to start listen for clicks AFTER makeButton() is ready and has added the button?</p>
  
  <p>EDIT:
  Ok, that works. Sorry. The actual case is not really like the above, but similar.</p>
  
  <p>the makeButton() is actually another function that gets data by ajax, so makeButton is more like this:</p>
  
  <pre><code>makeButton(){
      $.ajax({
          type: 'POST',
          url: 'ajax_images.php',
          data: {pageNr: pageNr},
          success:function(response) {
              //Loops the json and does something like this:
              var HTML = '&lt;div id="thumbnail"&gt;;
              HTML += 'Response Stuff'
              HTML += '&lt;/div&gt;';
              $('#my-content').html(HTML);
          } 
      });
  }
  </code></pre>
  
  <p>Sorry for beeing confusing.</p>