title: Finding a non related child element from a $this click event
body: <p>I have a jquery code that when the user clicks on the menu button (Example: Donation button) it changes the article section of the page (Not related directly as a child to the menu section) pulling new information with javascript. The DOM does not show this new information so when I try to apply a CSS class, it does not work.</p>
  
  <p>How can I click on the donation button so it creates the new information in the article section BUT it also applies the CSS class to it.</p>
  
  <p>Here is part of the code to give an idea:</p>
  
  <h2>JAVASCRIPT</h2>
  
  <pre><code>   $(document).on('click', '.menu', function () {
          var option = $(this).text().replace(/á/g, 'a').replace(/é/g, 'e').replace(/í/g, 'i').replace(/ó/g, 'o').replace(/ú/g, 'u').toLowerCase();
          $('.active').removeClass("active");
          $(this).addClass("active"); 
          $('#context').html(menu[option]).find('form').addClass("centerB");
          change = true;
  
      });
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div class="secContainer"&gt;&lt;/div&gt;    
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="index.html" id="index" class="menu"&gt;Home&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#" class="menu"&gt;Population&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" class="menu"&gt;Life Style&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#" class="menu"&gt;Work&lt;/a&gt;&lt;/li&gt; 
                      &lt;li&gt;&lt;a href="#" class="menu"&gt;Comments&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" class="menu"&gt;Gallery&lt;/a&gt;&lt;/li&gt; 
                      &lt;li class="last"&gt;&lt;a href="#" class="menu"&gt;Donations&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
  .....
  
      &lt;article id="context"&gt;
          &lt;h2&gt;HISTORY&lt;/h2&gt;
              &lt;p&gt;Indians once lived with machine guns and aliens. They formed highly trained tech industries and ate bananas. They trained playing mario bros all day long until reaching the boss in less than 5 minutes.&lt;/p&gt;
      &lt;/article&gt;
  </code></pre>
  
  <p>Basically they click on the Donation button on the main menu. This changes the content of the article element to something else. This something else is not available directly in the loading on the web page, instead, it is pulled from a javascript object that has the text.</p>
  
  <p>This line takes care of changing the context:</p>
  
  <pre><code>        $('#context').html(menu[option]).find('form').addClass("centerB");
  </code></pre>
  
  <p>I added the ".find('form').addClass("centerB");" to see if it worked. It did not. I wanted to apply a CSS to the recently pulled information. How can I apply a CSS or another change to this type of nonexisting dom information. Please correct me if my terminology or knowledge about it is wrong and also if you think a better title could be appropriate.</p>