title: Two Ajax dynamically created elements can't recognize each other
body: <p>Dear Stack Overflow community,</p>
  
  <p>I have been trying to develop a table creator that creates two tables dynamically when a button is clicked. This has worked... Well it hasn't at least for now.</p>
  
  <p>Right now I am generating a <code>&lt;p&gt;</code> element with class heading and a <code>&lt;div&gt;</code> element with class content. When <code>p</code> is clicked, content is slideToogled.</p>
  
  <p>I have tried using <code>on()</code> with jQuery or attaching any function to the <p> element but it doesn't seem to work. Also <code>.hide()</code> doesn't work on content which is extremely annoying. Can anyone give me some advice as to how to approach this please?</p>
  
  <p>On seems to work for content I hard written with HTML, but it doesn't on AJAX generated code appended to the div.</p>
  
  <p>Here are the related snippets of code:
  Ajax:</p>
  
  <pre><code>function submition() {
          $.ajax({
              type: 'GET',
              url: 'phpQueries.php?q=getQueryBuilder&amp;schools=' + mySchools.toString()+ '&amp;depts=' + myDeps.toString() + '&amp;lvls=' + myLevs.toString() + '&amp;srcs='+mySrc.toString() + '&amp;codes='+myCodes.toString(),
              success: function (data) {
                  $("#dump_here").append(data);
              }
          });
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>$(".heading").on("click", function() {
                  alert("Hello World");
                  $(this).next(".content").slideToggle(500);
            });
  </code></pre>
  
  <p>PHP:</p>
  
  <pre><code>echo '&lt;p class="heading"&gt;See/Hide Comments&lt;/p&gt; ';
      echo '&lt;div class="content"&gt;I am I am I am.... Superman!&lt;/div&gt;';
  </code></pre>
  
  <p>Kind Regards,
  Gempio</p>