Как добавить DOM-элементы к динамически добавляемым DOM-элементам

Question

Раскрывающееся меню динамически добавляется в DOM при нажатии на кнопку гамбургера.Я хотел бы динамически добавлять некоторый контент в это динамически создаваемое выпадающее меню.

Я попробовал метод добавления.Как и ожидалось, это не работает, потому что выпадающее меню не существует во время выполнения кода.

$(".dynamicallyaddeddropdownmenu").append("some content");

Я также пытался:

$(document).on("focus", ".dynamicallyaddeddropdownmenu", function(){
    $(".dynamicallyaddeddropdownmenu").append("some content");
});

CSS::after не будет работатьпотому что добавляемый контент должен быть кликабельным.

Answer 1

Допустим, у вас есть HTML, который при нажатии кнопки генерирует динамический выпадающий список:

$('#btn').click(function () {
        if ($('.dynamicallyaddeddropdownmenu').length == 0) {
        $('#div1').append('<select class="dynamicallyaddeddropdownmenu"></select>');
        AppendInDropdown();
    }
    });
    function AppendInDropdown() {
        $('.dynamicallyaddeddropdownmenu').focus(function () {
            $(".dynamicallyaddeddropdownmenu").append('<option value="1">1</option>'); //append some content
        });
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1"></div>
<br />
<input type="button" id="btn" value="Click Me" />

вам необходимо вызвать функцию AppendInDropdown (), когда вы динамически добавляете выпадающий список

Answer 2

Я не эксперт по JavaScript, но у меня уже была эта проблема с jQuery, и я помню, что она работала, когда я использовал .after() вместо .append() с вариацией .on() для динамически добавляемых элементов.