javascript - jQuery 在 AJAX 响应后找不到元素(或更新类)

Question

我有很多使用 jQuery.on() 事件的工作函数，它们工作正常 - 但前提是它绑定(bind)到一个元素(比如“a.my-link”或其他东西)。

这个函数hovever，是绑定(bind)到document or body，然后遍历多个具有相同class属性的元素。我已经评论了不会触发的行。

• selectable["holder"]:类为“a.fr-drive-selectable”的元素
• 如果选择它添加类“fr-drive-selected”
• 如果选择了多个(多个)，则添加类“fr-drive-selected-b”

我还有一个仅使用 CTRL 键 + 鼠标来选择多个元素的函数 - 它有效，因为 on() 函数绑定(bind)到元素 ...

    /**
     *  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>

Answer 1

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

也许您正试图在将元素添加到 DOM 之前引用这些元素。

另外，对于动态元素，请尝试在选择器查询中提及父元素，然后是您要访问的元素，如下所示。

$(".parent .dynamic-child").removeClass();