Question

通过单击“汉堡”按钮将下拉菜单动态添加到DOM。我想将一些内容动态添加到此动态创建的下拉菜单中。

我尝试了append方法。正如预期的那样，这是行不通的，因为执行代码时不存在dropdown菜单。

$(".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()的{{1}}变体来动态添加项目时，它可以工作。

如何将DOM元素附加到动态添加的DOM元素中

2 个答案: