为什么jQuery不适用于javascript生成的html？

Question

我有一个名为 getImages 的 JS 函数，它加载到这个 html 中：

// Begining of funtion
function getImages() {
    $.getJSON(GETIMAGELIST, function(data) {
        var items = [];

// html populate
$.each(data, function(key, val) {
    items.push('<div class="post-container">');
    items.push('<div class="post-heading-container">');
    items.push('<div class="username-container plain-text">');
    items.push('<p>' + val["userName"] + '</p>');
    items.push('</div>');
    items.push('<div class="actions-container">');
    items.push('<button class="post-action-btn" id="post-action-btn">');
    items.push('<span class="fas" id="menu-icon"></span>');
    items.push('</button>');
    items.push('<div class="action-menu-container glass-effect" id="action-menu-container">');
    items.push('<div class="menu-option-row">');
    items.push('<button class="menu-action-btn small-text">Leave a comment</button>');
    items.push('</div>');
    items.push('</div>');
    items.push('</div>');
    items.push('<div class="clearFix"></div>');
    items.push('</div>');
    items.push('<div class="post-content-container">');
    items.push("<img src='" + BLOB_ACCOUNT + val["filePath"] + "' class='uploaded-file'/>");
    items.push('</div>');
    items.push('<div class="post-info-container plain-text">');
    items.push('<span class="username">' + val["userName"] + ': </span>');
    items.push('<span class="post-name">' + val["fileName"] + '</span>');
    items.push('</div>');
    items.push('<div class="comment-section">');
    items.push('<div class="comment-content small-text">');
    items.push('<span class="username">username: </span>');
    items.push('<span class="comment">comment 1</span>');
    items.push('</div>');
    items.push('</div>');
    items.push('</div>');
});

// End of function
$('#ImageList').empty();

$("<ul/>", {
    "class": "posts",
    html: items.join("")
}).appendTo("#ImageList");

加载时的 HTLM 如下所示：

<div class="posts">
    <div class="post-container">
        <div class="post-heading-container">
            <div class="username-container plain-text">
                <p>Username</p> 
            </div>

            <div class="actions-container">
                <button class="post-action-btn" id="post-action-btn">
                    <span class="fas" id="menu-icon"></span>
                </button>

                <div class="action-menu-container glass-effect" id="action-menu-container">
                    <div class="menu-option-row">
                        <button class="menu-action-btn small-text">Leave a comment</button>
                    </div>
                </div>
            </div>

            <div class="clearFix"></div>
        </div>

        <div class="post-content-container"></div>

        <div class="post-info-container plain-text">
            <span class="username">username:</span>
            <span class="post-name">post title</span>
        </div>

        <div class="comment-section">
            <div class="comment-content small-text">
                <span class="username">username:</span>
                <span class="comment">comment 1</span>
            </div>

            <div class="comment-content small-text">
                <span class="username">username:</span>
                <span class="comment">comment 2</span>
            </div>
        </div>
    </div>
</div>

静态生成HTML时，直接输入index.html，结果为：

动态生成HTML时，通过getImages func，结果为：

您可以看到，jQuery 在动态调用时不会加载到省略号中，但在静态调用时会加载。这是为什么呢？

这是在省略号中加载的 jQuery：

$("#menu-icon").addClass("fa-ellipsis-h"); // Menu ellipsis


// This jQuery is the code that changes the menu icon in the first screenshot
$("#post-action-btn").click(function() {
    if (menu_open == false) {
        // Fading in the Action Menu on click
        $("#action-menu-container").fadeIn();
        $("#menu-icon").removeClass("fa-ellipsis-h");
        $("#menu-icon").addClass("fa-times");
        menu_open = true
    } else if (menu_open == true) {
        $("#action-menu-container").fadeOut();
        $("#menu-icon").removeClass("fa-times");
        $("#menu-icon").addClass("fa-ellipsis-h");
        menu_open = false
    }
});

感谢您的帮助！

Answer 1

这个修复很简单，我所要做的就是将 jQuery 移动到 getImages() func 中