选择将在ajax作业之后创建的html元素

Question

我想用 jQuery 添加自定义右键单击上下文菜单 on（.message）元素foreach循环后可用的内容。

在我的索引html文件中，我有div by id（show_case） chat.php

 foreach ($messages as $key => $value) { ?>
            <div class="message">
                <p class="username"><?php echo $value['username']; ?></p> <span>say:</span>
                <p class="text"> <?php echo $value['message']; ?></p>
            </div> <?php }
    }

chat.js使用了jQuery / ajax

chat.fetchMessages = function () {

    var data = {method: "fetch"}
    $.ajax({
        url: 'ajax/chat.php',
        type: 'POST',
        data: data,
        success: function (data) {
            $('#show_case').html(data);
        }

    });
}

现在我想在foreach循环中选择带有类消息的div来处理我的上下文菜单选项 的 menu.js

$('document').ready(function()
{
    $(".message").on("contextmenu", function (e) {

        e.preventDefault();
        var menu = $(".menu");
        menu.hide();
        //let get xposiion;
        var xpos = e.pageX;
        var ypos = e.pageY;

        menu.css({
            top: ypos,
            left: xpos
        });
                menu.show(200);

我无法选择但不起作用。我该怎么办？