title: How to change label text via JavaScript/jQuery after click on HTML form
body: <p>I am looking for a way to change the text under a name form element on a squarespace.com site. This is a website that helps you build websites, but you cannot change the source code yourself. You can, however, inject JavaScript.</p>
  
  <p>I know the id of the two elements I want to change. Looking from the developer tools I see the elements are labels and have an input field with a string underneath as follows:</p>
  
  <pre><code>&lt;label id="theLabel1"&gt;
  &lt;input type="text"&gt;&lt;/input&gt;
  
  "First Name"
  &lt;/label&gt;
  </code></pre>
  
  <p>The HTML above only appears after having clicked an element with class name "theClickedClass".</p>
  
  <p>While injecting the following code (with jQuery available): </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function() {
      $('.theClickedClass').click(function() {
          $('#theLabel1').text("THE NEW TEXT");
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The HTML stays exactly the same as above.</p>
  
  <p>I know that the clicked function works since I put a <code>console.log</code> there. Adding a wait period (to wait for the label to actually exist) does not make a difference.</p>
  
  <p>I don't know why it does not work. Does anyone else have an idea how the text in the label can be changed?</p>
  
  <p>Thanks.</p>