Question

我真的陷入了一个问题。我有一些PHP代码正确输出到HTML并在浏览器中显示（并且firebug显示源是正确的），但因为信息是由PHP发送显示客户端列表，我的jQuery点击＆＃39 ;选项＆＃39;菜单不起作用 - 它会被忽略。如果行是用平面HTML编写的，那么点击jQuery就适用于＆＃39;选项＆＃39;菜单，所以我知道jQuery很好。点击＆＃39;选项＆＃39;，＆＃39;操作菜单＆＃39; ul list应切换其显示，并从无到阻止。

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>';
    }
}
?>

和jQuery：

$(document).ready(function () {
    $('.action').on('click', function () {
        $('.action-menu').fadeToggle(200);
        $(this).toggleClass('action-on');
    });
});

Answer 1

尝试像这样更改你的jQuery：

$(document).ready(function () {
    $('div.row').on('click', '.action', function () {
        $('.action-menu').fadeToggle(200);
        $(this).toggleClass('action-on');
    });
});

无论何时加载，都将以.action类元素为目标。将selector参数添加到.on（）方法中可以让jQuery查找匹配的元素，无论它们何时创建。如果.row元素之外有.action元素，请选择包含所有元素的元素。如果所有其他方法都失败了，请使用body。

Answer 2

如果要动态添加HTML，可以将onclick事件添加到DOM加载中存在的任何可靠父级（例如：body）。

尝试更改下面的onclick，

$('body').on('click', '.action', function ()
{

    $('.action-menu').fadeToggle(200);

    $(e.target).toggleClass('action-on');

});

Answer 3

感谢所有人的支持。需要将其工作的jQuery代码需要放在PHP脚本末尾的实际HTML文件中 - 原因未知，因为它不会在javascript.js文件中侦听相同的代码

jQuery不会将代码应用于PHP输出的内容

3 个答案: