javascript - 为什么我的选择器找不到动态添加的元素？

Question

我想将一个名为 active 的类添加到使用 ajax jquery 动态添加的元素中 但是浏览器找不到它，我假设它是动态添加的。 我需要一种方法来查找元素，而无需任何事件(例如单击)。

还有一个帖子

jQuery - Find dynamically created element without events

但这一个不同，因为我试图找到一个在 ajax 成功事件后动态重新加载的元素。如果有点令人困惑，请查看下面我的代码以及类似但不同的帖子上的代码。 有人可以给我一些提示来找到没有任何点击事件或任何其他事件事件的动态元素。(被动事件很好，例如更改或加载) 我的html代码

<div class="h-endless">
   <div class="htmlgroup1container">
        <a href="javascript:void(0)" data-group="group1" id="g-button1" class="g-button">firstButton</a>
        <a href="javascript:void(0)" data-group="group2" id="g-button2" class="g-button">secondButton</a>
   </div>
</div>

javascript/jquery 代码

$(document).ready(function(){
    $("#addGroup").on('submit', function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'pf/formMail.php',
            data: new FormData(this),
            dataType: 'json',
            contentType: false,
            cache: false,
            processData:false,
            success: function (data){
                outputCheck(data.message);
                if(data.message=="success"){
                    $.post("pf/formHTMLUPDATE.php", {
                        recall: "groups",
                        type: "group1"
                    }, function(data, status) {
                        $(".htmlgroup1container").html(data);
                    })
                    ///$("#g-button1").addClass("active");///
                }
            },
            error: function(xhr, status, error) {
                $("#alert").css("background-color", "red");
                $("#alert").css("display", "block");
                $("#alert").html("Error<span class=\"closebtn\" onclick=\"this.parentElement.style.display='none';\">&times;</span>");
            }
        });
    });
});

ajax方法基本上替换了元素中的html数据 最初内部具有相同的内容(在实际代码中，它将用不同名称的链接替换它，或多或少)。我发布的代码有点淡化，因此仅显示必要的代码。

我已经突出显示或删除了////不起作用的代码。事件类只是使按钮/链接变为绿色。 提前致谢

Answer 1

问题实际上是时间问题。您尝试在添加元素之前添加类。您需要在异步函数的回调中执行此操作:

if(data.message=="success"){
    $.post("pf/formHTMLUPDATE.php", {
        recall: "groups",
        type: "group1"
    }, function(data, status) {
        $(".htmlgroup1container").html(data);
        $("#g-button1").addClass("active"); // to here
    })
    // from here
}