Почему мой селектор не находит динамически добавленный элемент? - PullRequest
Новая
       3

Почему мой селектор не находит динамически добавленный элемент?

2 голосов
/ 09 апреля 2020

Я хочу добавить класс с именем active к элементу, который динамически добавляется с помощью ajax jquery, однако браузер не может найти его, который я предполагаю, потому что он был добавлен динамически. Мне нужен способ найти элемент без каких-либо событий, таких как нажатие.

есть еще один пост

jQuery - Найти динамически созданный элемент без событий

, но этот другой, потому что я пытаюсь найти элемент, который был перезагружен динамически после события успеха ajax. Если это немного сбивает с толку, пожалуйста, проверьте мой код ниже и код в похожем, но другом посте. Может кто-нибудь дать мне несколько советов, чтобы найти динамический c элемент без каких-либо событий щелчка или любого другого активного события (пассивные события хороши как изменение или загрузка) Мой 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 code 

$(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 в элементе на то же, что изначально внутри (в реальном коде он заменяет ссылки ссылками с другими именами далее из них или меньше из них). Код, который я разместил, немного разбавлен, поэтому отображается только необходимый код.

Я выделил или сократил //// код, который не работает. Активный класс просто делает кнопку / ссылку зеленой. Заранее спасибо

1 Ответ

1 голос
/ 09 апреля 2020

Проблема на самом деле одна из времени. Вы пытаетесь добавить класс до добавления элемента. Это необходимо сделать в обратном вызове асинхронной функции: 

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
}
...