jQuery 在 AJAX 响应后未找到元素（或更新 class）

Question

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

这个函数悬停，绑定到文档或正文，然后遍历具有相同class属性的多个元素。我已经评论了不会触发的行。

可选["holder"]：具有class"a.fr-drive-selectable"
如果选择它会添加 class "fr-drive-selected"
如果选择了多个（多个），则添加 class "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!
    });

如果没有附加动态数据，该函数会起作用 - 之后，它只会删除项目，而不是 classes（add() 或 remove()）。我已经使用控制台打印出元素 - AJAX 之后的 each() 中的对象没有 "up to date" class 属性。

我知道问题是事件没有绑定到有问题的元素，但我需要一个快捷方式来处理页面上的关键事件，而不是元素上的。

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

        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();

Answer 2

原来如此……找到了答案。我不知道为什么，如果有人稍后可以澄清。

所以我简单地更改了行 selectable["$holder"] 并在函数内声明了一个局部变量（检查 //DIFF）。

修改后的代码


 page.$body.on("keydown", .... {

   let selector = "a.fr-drive-file-selectable";

   $(this).find(selectable["$holder"]) // DIDNT WORK, works before AJAX updates DOM!
   $(this).find(selector) // works ... why?

   //selectable["$holder"].each(function () { CHANGED TO

   $(this).find(selector).each(function () { // NEW CODE

   ...
}

完整代码

    /**
     *  Selecting or deselecting all available items (CTRL + ALT + A)
     *
     *  - Selecting: CTRL + ALT + A
     *  - Deselecting: CTRL + ALT + D
     */
    page.$body.on("keydown", function (shortcut) {
        let selector = "a.fr-drive-file-selectable";

        if (shortcut.ctrlKey && shortcut.altKey && shortcut.key === "a") {
            $(this).find(selector).each(function () {
                if (!$(this).children(fdrive["content"]["class"]).hasClass(selectable["multiple"]["class"])) {
                    if (!(items.indexOf(parseInt($(this).attr('data-id'))) > -1)) {
                        addItem(items, $(this));
                    }

                    addContextMenuOption($(this));

                    console.log(items);

                    $(this).children(fdrive["content"]["class"]).removeClass(selectable["one"]["class"]);
                    $(this).children(fdrive["content"]["class"]).addClass(selectable["multiple"]["class"]);
                }
            });
        } else if (shortcut.ctrlKey && shortcut.altKey && shortcut.key === "d") {
            $(this).find(selector).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"]);
                    $(this).children(fdrive["content"]["class"]).removeClass(selectable["one"]["class"]);

                    resetContextMenuOptions();

                    items = [];

                    console.log("Removed ALL");
                }
            });
        }

        updateItemCounter(items);
    });

jQuery 在 AJAX 响应后未找到元素（或更新 class）

jQuery not finding elements (or updating class) after AJAX response

javascript

ajax

jquery

events

bind