Javascript 动态添加语义UI控件的正确方法？

我试着去想一想，我知道所有的事情都是如何由你给DOM元素的类来控制的，但是当动态地添加新的DOM元素时，我真的无法做到这一点。语义ui javascript似乎只在第一页加载时运行，而不是在添加新元素时运行。目前，这仅通过以下方式完成：

$("#target").html("<new elements here>")

---

之后，它会在悬停状态下打开。但是有没有一种方法不必每次都重新运行它呢？

向DOM添加元素的方法很少

html

（将清空容器，然后插入新元素）就是其中之一。还可以使用

append

将新元素追加到现有集合。但是，您的问题是动态添加的元素上没有触发事件。此问题的解决方案是事件委派。阅读

从：委派事件的优点是，它们可以处理来自子元素的事件，这些子元素将在以后添加到文档中。通过选择在附加委派事件处理程序时保证存在的元素，可以使用委派事件来避免频繁附加和删除事件处理程序

这里是一个关于添加新元素、事件延迟等的快速演示。希望对您有所帮助

var$container=$（“#container”）；
var计数=3；
$container.on（“单击”，“按钮”，函数（））{
警报（“您已单击“+$（this）.text（））；
});
$（“#添加按钮”）。在（“单击”，函数（）{
$container.append（“按钮”+（+++count）+”）；
});

按钮1
按钮2
按钮3
再加几个您可以将语义jquery调用放在函数中，然后在appendTo之后的回调中调用它

$(menu).appendTo("#rightMenu").each(function() {
activateSemantics();
});
function activateSemantics(){
     $('.ui.dropdown')
  .dropdown({
      on: 'hover'});
}

在像LShetty说的那样通过JQuery添加元素之后，对于语义UI下拉列表，您需要初始化它。但是，似乎您关心的是使用不同的或添加的设置重新初始化其他下拉列表。
在这种情况下，只需初始化添加的下拉列表

请注意，并非所有语义UI元素都是如此，可能只是下拉式元素和一些其他元素

var menu = '<div class="ui dropdown link item"> \
  Test \
  <i class="dropdown icon"></i> \
  <div class="menu"> \
    <a class="item" href="http://google.com">Google</a> \
    <a class="item" href="http://amazon.com">Amazon</a> \
  </div> \
</div>';

$("#rightMenu").append(menu)

menu.find(".ui.dropdown")
  .dropdown({
    on: 'hover'
  });

var菜单=”\
试验\
\
\
\
\
\
';
$（“#右菜单”）。附加（菜单）
menu.find（“.ui.dropdown”）
.下拉列表({
关于“悬停”
});
我对jquery事件没有问题，只是语义UI代码没有在新元素上运行。如果我添加了，例如“press！我只得到一个带有ui按钮的div，类为红色，但不是语义ui按钮。请参阅使用代码示例更新。元素显示，但其操作（如下拉）没有连接。语义ui中的选项卡菜单遇到了类似的问题。受此答案的启发，我通过调用$（'#context1.menu.item'）.tab（）就在所有新元素被动态创建并附加到现有节点之后。动态内容是通过用户交互添加的吗？有时。不总是。两者兼而有之。我主要关心的是它是否保存以调用。多次下拉，因为它将调用已存在的元素。想法？不想以有双重事件连接或任何东西。
$('.ui.dropdown')
  .dropdown({
    on: 'hover'
  });

$(menu).appendTo("#rightMenu").each(function() {
activateSemantics();
});
function activateSemantics(){
     $('.ui.dropdown')
  .dropdown({
      on: 'hover'});
}

var menu = '<div class="ui dropdown link item"> \
  Test \
  <i class="dropdown icon"></i> \
  <div class="menu"> \
    <a class="item" href="http://google.com">Google</a> \
    <a class="item" href="http://amazon.com">Amazon</a> \
  </div> \
</div>';

$("#rightMenu").append(menu)

menu.find(".ui.dropdown")
  .dropdown({
    on: 'hover'
  });