Javascript — JQuery увольнение в начале
Я пытаюсь создать веб-сайт для своей школы, где вы можете искать книги через 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>
Решение
Вам нужно использовать делегирование мероприятия нацелиться на динамику .post узлы:
$('#output').on('click', '.post', function() {
$('.removeform').css('visibility','visible');
});
$('.post').click(...) нацелен на текущий набор из .post узлы, это не «живой» список. Используя делегирование событий, вы можете прикрепить прослушиватель событий к общему (статическому) родителю и действовать только на цели событий, которые соответствуют предоставленному селектору (.post). Так как событие запускается на родительском объекте, нет проблем с действием на динамически добавляемых узлах.
Другие решения
Используйте $ (document) .ready () https://learn.jquery.com/using-jquery-core/document-ready/
Страницу нельзя безопасно обрабатывать, пока документ не «готов». JQuery обнаруживает это состояние готовности для вас. Код, включенный в $ (document) .ready (), будет работать только после того, как страница объектной модели документа (DOM) будет готова для выполнения кода JavaScript.
JQuery:
<script>
$(document).ready(function() {
$('.post').click(function(){
$('.removeform').css('visibility','visible');
});
});
</script>
detector