JQuery firing to early

Question

I'm trying to make a website for my school, where you search for books through php, and when you click on a book it brings up a form to fill in a students info. However, when the JQuery runs when the document loads, the object I am trying to target is not in the page yet, this is because the page loads the object when the user types in the search bar. How do I delay the function until I have loaded the required objects?

Here is the code: HTML:

<section>
    <img id="reading" src="img/reading.png" alt="person reading" />
    <p>Any Book you want, at your Fingertips.</p>
    <p class="subtext">Use the searchbar below to search for any book </br> in the Summerhill Library by name, author or ISBN.</p>
    <input type"search" class='search' name='search'  placeholder="Please enter Name, Author, ISBN or Catagory Number." onkeyup='searchq();'/>
</section>

<div class='results'>
    <h2>Results</h2>
      <div id='output'>

</div>
</div>



<div class='removeform'>
    <h1>Book Lending</h1>
    <!-- name -->
    <p class='tagfullwidth'>Student Name</p>
    <input class='fullwidthinput' type='text' />
    <!-- bookname -->
    <p class='tagfullwidth'>Book Name</p>
    <input class='fullwidthinput book'  type='text' />
    <!-- yeardata -->
    <div class='columns'>
        <div class='column'>
            <p class='tagfullwidth'>Year</p>
            <input class='halfwidthinput' type='text' />
        </div>
        <div class='column'>
            <p class='tagfullwidth textsecond'>Class</p>
            <input class='halfwidthinput second' type='text' />
        </div>
    </div>
    <!-- date -->
    <div class='columns'>
        <div class='column'>
            <p class='tagfullwidth'>Today's Date</p>
            <input class='halfwidthinput grey' type='date' />
        </div>
        <div class='column'>
            <p class='tagfullwidth textsecond'>Expected Return Date</p>
            <input class='halfwidthinput second grey' type='date' />
        </div>
    </div>
    <!-- teachername -->
    <p class='tagfullwidth'>Teacher Signature</p>
    <input class='fullwidthinput' type='text' />
    <!-- submit -->
    <button class='scroll'>Submit Book Lend</button>
    <p class='closebtn'>close</p>
</div>

CSS:

.removeform{
    background-color:#fff;
    width:1300px;
    height:720px;
    border-radius:20px;
    margin:0 auto;
    margin-top:100px;
    position:fixed;
    left: calc(50% - 650px);
    visibility: hidden;
}

JQuery:

<script>
        $('.post').click(function(){
            $('.removeform').css('visibility','visible');
        });
    </script>

.post is a div created by the PHP, sorry for not saying that earlier... — Conor Curley, Aug 11 '17 at 21:00
This isn't very clear? Where's that script tag in the document? How are those elements loaded when the user types ? — adeneo, Aug 11 '17 at 21:02
Possible duplicate of [Is javascript properly linked to html? Why is the script not running?](https://stackoverflow.com/questions/33730796/is-javascript-properly-linked-to-html-why-is-the-script-not-running) — Adam Mazzarella, Aug 11 '17 at 21:02
Appologies, the JQuery is within the HTML, I seperated to make it easier to read, but it ended up creating confusion. — Conor Curley, Aug 11 '17 at 21:07

score 1 · Answer 1 · answered Aug 11 '17 at 21:02

Use $(document).ready() https://learn.jquery.com/using-jquery-core/document-ready/

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute

JQuery:

<script>
$(document).ready(function() {
    $('.post').click(function(){
        $('.removeform').css('visibility','visible');
    });
});
</script>

score 0 · Accepted Answer · answered Aug 11 '17 at 21:02

You need to use event delegation to target the dynamic .post nodes:

$('#output').on('click', '.post', function() {
   $('.removeform').css('visibility','visible');
});

$('.post').click(...) targets the current set of .post nodes, it is not a "live" list. Using event delegation, you can attach the event listener to a common (static) parent and only act on event targets that match the supplied selector (.post). Since the event fires on the parent, there is no problem acting on dynamically added nodes.

JQuery firing to early

2 Answers2