title: jQuery Click event not firing on element click
body: <p>Below is my html and javascript. The Js is located in a app.js file and the html is a yes or no question. At the bottom of the javascript I have code that should fire on click events. Right now it is just to see if it detects a click on the p elements in the html but hasn't worked so far.</p>
  
  <p>Can anyone detect why this event isnt taking place?</p>
  
  <p>The other jQuery int he code does work but this jQuery isnt invoked by a function and is invoked based of strictly using a selector which leads me to believe there is something wrong with how I used document.ready in my project.</p>
  
  <p><strong>Html:</strong></p>
  
  <pre><code> &lt;div class="question animated slideInUp"&gt;
  
  &lt;h3&gt;Do you know your individual monthly rent cost?&lt;/h3&gt;
  
      &lt;div class="rentanswer"&gt;
      &lt;p&gt;Yes&lt;/p&gt;&lt;p&gt;No&lt;/p&gt;
          &lt;/div&gt;
  &lt;!--
      &lt;p&gt;If not, we'll get the average rent of a zip code for you from Zillow&lt;/p&gt;
      &lt;form  onsubmit="Obj(this.p.name,this.p.value)"&gt;
          &lt;input type="number"  id="p" name="rent" placeholder="Leave blank if N/A" &gt;
           &lt;input id="s" type="submit" value="Submit"&gt;
      &lt;/form&gt;
  --&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code> var quest = ['../partials/income.hbs', '../partials/state.hbs', '../partials/rent.hbs', '../partials/zip.hbs', '../partials/roomate.hbs', "../partials/summary.hbs"];
      var iterator = 0;
      //creates object that gets sent to api
      function Obj(name, vale){
  
          event.preventDefault(); //prevents pg refresh
  
          $('.form').load(quest[iterator], function () {
              $('.bar p#' + name).css("border","2px solid black").addClass('enter').next().css({"border":"2px solid black","pointer-events":"auto","cursor":"pointer"});
          });
          //loads next html question to page
         if(name){
  
              data[name] = vale;
          }
          //move array accessor up to next question
          iterator++;
  
          console.log(data);
      }
      var data = {};
  
  
      //user can click already submitted values to load that orignal question and change it/
      function redo(q, id) {
          q = Number(q);
          //if the current queston on the page is not the one being clicked we then change it to the one being clicked
          if (q + 1 != iterator) {
              $('.form').load(quest[q], function () {
  
  
                  $('#p').val(data[id]);
              });
              iterator = q + 1;
          };
      };
  
      $(document).ready(function(){
      $('.rentanswer p').on('click',function(){
         console.log('hey'); 
      });
      });
  </code></pre>