my websites search results are immune to jquery - php

Question

I have a website where I can search for things in the database, let it be boats for now.
I use this form
<form method="post" action="">
<input type="text" class="form-control" id="searchField" name="searchField" autocomplete="off"/>
</form>
<div id="searchResults"></div>
And this jquery to display serch results
//Autocomplete search field
$("#searchField").keyup(function(){
var input = $("#searchField").val();
$("#searchResults").html("");
input = $.trim(input);
if(input){
$.post( "source/pages/processing/search_boats.php", {inputString:""+input+""}, function( data ) {
$( "#searchResults" ).html( data );
});
}
});
the search_boats.php look like this:
<?php
$input = $_POST['inputString'];
$sql = mysqli_query($dbcon, "SELECT boat_name FROM boats WHERE boat_name LIKE '%".$input."%' ORDER BY boat_name LIMIT 5 ");
echo "<ul id='searchUL'>";
while($row = $sql -> fetch_array()){
?>
<div class="row">
<div class="col-md-4">
<? echo $row['boat_name']?>
</div>
</div>
<?
For now this working perfectly - just like I want it. However, when these search results appear on the website I can not add any click events on them. Ive tried making buttons, anchors. I suspect jquery is not ready for this added piece of search results that Im displaing the user. For example, I'm able to hide a div called myDiv on click on any anchor tags
like so..
$("a").click(function(){
$("#myDiv").toggle();
});
but when I click anchors on the search results, the myDiv isn't being hidden.
What could be the problem ?

Answer 1

Try This
$('body').on('click','a',function(){
$("#myDiv").toggle();
});