title: Can you use a jQuery selector on a HTML tag that a JS string printed?
body: <p>Sorry if the question was misleading, I couldn't find a better way to describe my problem. Anyway, here goes:  </p>
  
  <p>Suppose I had a button <code>start</code> that initially displays a string for me. Said string (let's call it <code>stringA</code>) is output through jQuery like this: </p>
  
  <pre><code>$(".start").click(function() {
      $(".startButton").hide('slow', function() {
          $("#table1").html(stringA);
      });
  });
  </code></pre>
  
  <p>Alright. Cool. That worked without a hitch. Now inside <code>stringA</code> I have multiple<br>
  <code>&lt;span class="optButton"&gt;this is a button&lt;/span&gt;</code> buttons. I have another onClick handler for my <code>optButton</code> button, and it goes like this:</p>
  
  <pre><code>$(".optButton").click(function() {
      alert("Testing");
      $("#table1").html(stringB);
  });
  </code></pre>
  
  <p>Needless to say, clicking on <code>optButton</code> is supposed to replace the contents of <code>#table1</code> with <code>stringB</code>. However, when I tried it, it doesn't work. I tried adding <code>alert()</code> to test and see if jQuery managed to select <code>optButton</code>, but it seems that it didn't because I get no popup from the <code>alert()</code> function.  </p>
  
  <p>My theory is that since <code>optButton</code> was not part of the original HTML and is within a string <code>stringA</code>, jQuery is unable to select <code>optButton</code> as a result. If this is true, is there a workaround to this issue? If it is not, what is the actual cause of the problem here?</p>