1

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.

Can anyone detect why this event isnt taking place?

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.

Html:

 <div class="question animated slideInUp">

<h3>Do you know your individual monthly rent cost?</h3>

    <div class="rentanswer">
    <p>Yes</p><p>No</p>
        </div>
<!--
    <p>If not, we'll get the average rent of a zip code for you from Zillow</p>
    <form  onsubmit="Obj(this.p.name,this.p.value)">
        <input type="number"  id="p" name="rent" placeholder="Leave blank if N/A" >
         <input id="s" type="submit" value="Submit">
    </form>
-->

</div>

Javascript:

 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'); 
    });
    });
Pehlaj - Mobile Apps Developer
  • 9,006
  • 9
  • 35
  • 48
Aaron
  • 91
  • 1
  • 2
  • 8

1 Answers1

2

Here you go with a solution https://jsfiddle.net/g8xt5g4y/

$(document).ready(function(){
  $(document).on('click','.rentanswer p',function(){
     console.log($(this).text()); 
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Do you know your individual monthly rent cost?</h3>

<div class="rentanswer">
  <p>Yes</p>
  <p>No</p>
</div>

I believe your HTML is getting rendered dynamically, that's why your click method isn't working.

Try event delegate (mentioned in th above code).

Hope this will help you.

Shiladitya
  • 11,210
  • 15
  • 22
  • 33
  • Thank you, this solved the issue. Can you explain what the jquery code is doing differently and why this is occuring? – Aaron Aug 28 '17 at 04:11
  • @Aaron. I've already mentioned below the code. It was not working because your `HTML` content is getting rendered dynamically & your `jQuery` code is getting executed when dom is ready (by then your `HTML` was not present). That's why you need event delegate. – Shiladitya Aug 28 '17 at 04:13
  • In simple terms, when your `jQuery` code was getting executed, `HTML` codes were not rendered into the browser. So for triggering an event you need event delegate. – Shiladitya Aug 28 '17 at 04:18
  • There's really no need to wrap delegated event handlers in `document.ready` – Phil Aug 28 '17 at 04:41
  • thanks for the help. I imagine if I was using a framework like react I wouldnt have to deal with this type of issue right? – Aaron Aug 28 '17 at 12:10