jQuery does not apply code to content outputted by PHP - php

Question

I am really stuck on an issue. I have some PHP code that outputs correctly to HTML and displays as it should in the browser (and firebug shows the source is correct), but because the information is sent by PHP to display a list of clients, my jQuery on click 'Options' menu will not work - it gets ignored. If the rows are written in flat HTML, the jQuery on click works for the 'Options' menu, so I know the jQuery is fine. On click of 'Options', the 'action-menu' ul list should toggle its display and go from none to block.
PHP:
<?php
include('dbConfig.php');
$term = $_POST['searchit'];
if($term == ''){
echo '<div class="row"><div class="col-2"></div>Enter a search term</div>';
} else {
if($client = $db->prepare("SELECT client_id, client_unique_id, client_first_name, client_last_name, client_organisation_name, client_telephone, client_list_all FROM clients WHERE client_unique_id LIKE ? OR client_first_name LIKE ? OR client_last_name LIKE ? OR client_organisation_name LIKE ? OR client_address_line_1 LIKE ? OR client_list_all LIKE ? ORDER BY client_id DESC")){
$client->bind_param('ssssss', $term, $term, $term, $term, $term, $term);
$client->execute();
$client->bind_result($client_id, $client_unique_id, $client_first_name, $client_last_name, $client_business, $client_telephone, $client_list_all);
$client->store_result();
$string = '';
if($client->num_rows > 0){
while($client->fetch()){
$properties = $db->prepare("SELECT property_id FROM properties WHERE property_client_id = ? LIMIT 1");
$properties->bind_param('i', $client_id);
$properties->execute();
$properties->store_result();
$properties->bind_result($property_id);
if($properties->num_rows > 0 ){
$active = '<span class="label label-success">ACTIVE</span>';
} else {
$active = '<span class="label label-warning">INACTIVE</span>';
}
if(!$client_business){
$client_business = 'N/A';
}
$properties->close();
$string .= '<div class="row">';
$string .= '<div class="col-2">'.$client_unique_id.'</div>';
$string .= '<div class="col-3">'.$client_first_name.' '.$client_last_name.'</div>';
$string .= '<div class="col-3">'.$client_business.'</div>';
$string .= '<div class="col-2">'.$client_telephone.'</div>';
$string .= '<div class="col-2 align-center">';
$string .= '<div class="action">Options<span class="action-arrow"><i class="fa fa-caret-down"></i></span>';
$string .= '<ul class="action-menu">';
$string .= '<li><i class="fa fa-folder-open-o"></i>View client</li>';
$string .= '<li><i class="fa fa-pencil-square-o"></i>Edit client</li>';
$string .= '<li><a onclick="deleteItem($(this))" style="cursor: pointer;" data-client-id="'.$client_id.'"><i class="fa fa-trash-o"></i>Delete client</a></li>';
$string .= '</ul>';
$string .= '</div>';
$string .= '</div>';
$string .= '</div>';
}
$client->close();
} else {
$string = '<div class="row"><div class="col-2"></div>No record found</div>';
}
echo $string;
} else {
echo '<div class="row"><div class="col-2"></div>ERROR: Could not prepare SELECT Client SQL statement.</div>';
}
}
?>
And the jQuery:
$(document).ready(function () {
$('.action').on('click', function () {
$('.action-menu').fadeToggle(200);
$(this).toggleClass('action-on');
});
});

Answer 1

Try changing your jQuery like this:
$(document).ready(function () {
$('div.row').on('click', '.action', function () {
$('.action-menu').fadeToggle(200);
$(this).toggleClass('action-on');
});
});
This will target the .action class elements no matter when they are loaded. Adding the selector parameter into the .on() method lets jQuery find elements that match no matter when they are created. If you have .action elements outside of the .row element, select for an element that contains them all. If all else fails, use body.

Answer 2

If you are adding the HTML dynamically, you can add the onclick event to any reliable parent that would exist on DOM load (eg:body).
Try to change the onclick like below,
$('body').on('click', '.action', function ()
{
$('.action-menu').fadeToggle(200);
$(e.target).toggleClass('action-on');
});

Answer 3

Thanks for all the support. The jQuery code that required this to work needed to be placed in the actual HTML file at the end of the PHP script - for reasons unknown, as it would not listen to the same code in the javascript.js file