jQuery不会将代码应用于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><a href="view-client.php?client='.$client_id.'"><i class="fa fa-folder-open-o"></i>View client</a></li>';
                $string .= '<li><a href="edit-client.php?client='.$client_id.'"><i class="fa fa-pencil-square-o"></i>Edit client</a></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.