javascript - JQuery 提前触发

Question

我正在尝试为我的学校制作一个网站，您可以在其中通过 php 搜索书籍，当您单击一本书时，它会弹出一个表格来填写学生信息。但是，当 JQuery 在文档加载时运行时，我尝试定位的对象还不在页面中，这是因为当用户在搜索栏中键入时页面加载了对象。如何延迟函数直到我加载了所需的对象？

代码如下: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>

Answer 1

使用 $(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>