时间戳

首页 > 解决方案 > 如何将 DOM 元素附加到动态新添加的 DOM 元素

jquery - 如何将 DOM 元素附加到动态新添加的 DOM 元素

问题描述

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

我尝试了附加方法。正如预期的那样，这不起作用，因为在执行代码时下拉菜单不存在。

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

我也试过：

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

CSS::after不起作用，因为添加的内容必须是可点击的。

标签： jquerydomappend

解决方案

假设您有 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() 函数

推荐阅读