jQuery在AJAX响应后找不到元素（或更新类）

Question

[我有很多使用jQuery.on（）事件的工作函数，并且它们可以正常工作-但仅当它绑定到元素（例如“ a.my-link”或类似内容）时才可以。）>

此函数非常有用，绑定到文档或正文

，然后遍历具有相同class属性的多个元素。我评论了这些行，这些行不会触发。

• selectable [“ holder”]：类为“ a.fr-drive-selectable”的元素]]
• 如果选择，它将添加“ fr-drive-selected”类
• 如果选择了多个（多个），那么它将添加类“ fr-drive-selected-b”

我还有一个仅使用CTRL键+鼠标选择多个元素的功能-它起作用，因为on（）函数绑定到了元素...

    /**
     *  Selecting or deselecting all available items (CTRL + ALT + A)
     *
     *  - Selecting: CTRL + ALT + A
     *  - Deselecting: CTRL + ALT + D
     */
    page.$body.on("keydown", function (shortcut) {
        if (shortcut.ctrlKey && shortcut.altKey && shortcut.key === "a") {
            selectable["$holder"].each(function () {
                if (!$(this).children(fdrive["content"]["class"]).hasClass(selectable["multiple"]["class"])) {
                    if (!(items.indexOf(parseInt($(this).attr('data-id'))) > -1)) {
                        addItem(items, $(this)); // WORKS FINE!
                    }

                    addContextMenuOption($(this)); // WORKS FINE!

                    console.log(items); // WORKS FINE!

                    $(this).children(fdrive["content"]["class"]).removeClass(selectable["one"] ["class"]); //NOT WORKING AFTER AJAX
                    $(this).children(fdrive["content"]["class"]).addClass(selectable["multiple"]["class"]); //NOT WORKING AFTER AJAX
                }
            });
        } else if (shortcut.ctrlKey && shortcut.altKey && shortcut.key === "d") {
            selectable["$holder"].each(function () {
                if ($(this).children(fdrive["content"]["class"]).hasClass(selectable["multiple"]["class"]) || $(this).children(fdrive["content"]["class"]).hasClass(selectable["one"]["class"])) {
                    $(this).children(fdrive["content"]["class"]).removeClass(selectable["multiple"]["class"]); //NOT WORKING AFTER AJAX
                    $(this).children(fdrive["content"]["class"]).removeClass(selectable["one"]["class"]); //NOT WORKING AFTER AJAX

                    resetContextMenuOptions(); // WORKS FINE!

                    items = []; // WORKS FINE!

                    console.log("Removed ALL"); // WORKS FINE!
                }
            });
        }

        updateItemCounter(items); // WORKS FINE!
    });
如果没有附加动态数据，该函数将起作用-之后，它将仅除去项目，而不除去类（add（）或remove（））。我已使用控制台打印出元素-AJAX之后的each（）中的对象没有“最新”类属性。
[我知道问题是

该事件不是所涉及元素的[[bind，但是我需要一种快捷方式来处理页面上而不是元素上的键事件。

---

类似的功能（效果很好，因为它使用了元素）：

        main_content["$holder"].on('contextmenu', 'a.fr-drive-file-selectable', function (ev) {
            if (!(findItemById(items, $(this).attr("data-id")))) {
                $(this).siblings(selectable["selector"]).children(fdrive["content"]["class"]).removeClass(selectable["multiple"]["class"]);
                $(this).siblings(selectable["selector"]).children(fdrive["content"]["class"]).removeClass(selectable["one"]["class"]);

                //resetContextMenuOptions();

                items = [];

                console.log("Adding one item (RESET)");
                addItem(items, $(this));

                console.log(items);

                $(this).children(fdrive["content"]["class"]).removeClass(selectable["multiple"]["class"]);
                $(this).children(fdrive["content"]["class"]).addClass(selectable["one"]["class"]);
            }
        });

为清楚起见，请检查控制台输出。蓝线表示在AJAX更新数据之前在“ keydown”事件上找到的元素。在那之后，jQuery找不到匹配的任何元素：“ a.fr-drive-file-selectable-
它们在页面上！

Console output

**其他信息（在提供答案之后）**

<div id="main-content" class="fr-content">

    <!-- AJAX CHANGES CONTENTS with the same elements, same class etc. (only the inner HTML of the elements is changed (ex. name, picture etc.)  -->

    <div class="fr-drive-file-selectable"><!-- name, picture --></div>
    <div class="fr-drive-file-selectable"><!-- name, picture --></div>
    <div class="fr-drive-file-selectable"><!-- name, picture --></div>
    <div class="fr-drive-file-selectable"><!-- name, picture --></div>
    <div class="fr-drive-file-selectable"><!-- name, picture --></div>

</div>

<script>
    var selectable = {
        $holder: $("a.fr-drive-file-selectable"),
        "class": ".fr-drive-file-selectable"
    }
</script>
<script>
    ...
    request.done(function (response, textStatus, jqXHR) {
        if (response["status"]) {
            $(id).html(response["fragment"]); //Loads only div.fr-drive-file-selectable (using foreach in PHP)

            stopPageLoader();

            adjustSidenavHeight();
        } else {
         ///
        }
    });
    ...
</script>

我有很多使用jQuery.on（）事件的工作函数，并且它们可以正常工作-但仅当它绑定到某个元素（例如“ a.my-link”或类似内容）时，才能正常工作。该函数非常有用，它绑定到...

Answer 1

我没有足够的代表来添加评论。

也许您在将元素添加到DOM之前尝试引用它们。

Answer 2

所以就这样...找到了答案。我不知道为什么，如果以后可以澄清。