jquery clicking on list item is not working

Question

I have this HTML and JS/jQuery code:

$(document).ready(function() {
$("#livesearch").on("click",  ".searchres", function(event){
    console.log('clicked');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="livesearch">
  <?php foreach($data as $i){?>
    <li class="searchres"><?php echo $i["name"];?></li>
    <?php } ?>
</ul>

This is part of a dropdown list that appears after an input form is being populated.

I would like to press on one of the dropdown lists .searchres and just print to console as a test.

This is, however, not printing on console. What am I doing wrong?

Details

At the start of my php file I have this code snippet that creates a 'livesearch' object which connects to my database.

<?php
  require_once('livesearch.php');
  $livesearch = new livesearch();
  $data = null;
  
?>

I am declaring $data=null here because I do not want any database fields to show at loading time. could this be the issue that is making livesearch Id non-existant on load?

Your code works assuming you add the jQuery library and livesearch is a unique ID and the UL exists on the page when the event handler runs — mplungjan, Jul 18 '19 at 09:46
@mplungjan livesearch is a unique ID and jQuery is added and working.... — user7331538, Jul 18 '19 at 09:48
@User863 that actually worked ! thank. Can you explain why that worked and my code did not? — user7331538, Jul 18 '19 at 09:49
If his suggestion worked then `
` did not exist when the event handler is executed. If you insert the ul after document.ready, then you need to delegate from document and not from #livesearch — mplungjan, Jul 18 '19 at 09:50
@mplungjan im calling jquery.js in head tag is that why livesearch is not found? — user7331538, Jul 18 '19 at 09:54
@mplungjan livesearch is declared in `` tag i dont know why it should not exist. do elements in body tag exist on loading page? — user7331538, Jul 18 '19 at 09:57
Yes. There is something else going on. Your code is as in your question? I.e the click handler in load event — mplungjan, Jul 18 '19 at 09:59
@mplungjan I updated the question with further details on code. Thanks — user7331538, Jul 18 '19 at 10:07
How does the code look when you click inspect on the livesearch object? — mplungjan, Jul 18 '19 at 11:24

jquery clicking on list item is not working

Details

0 Answers0