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

Question

我正在努力思考 Semantic UI 我明白一切都是如何由你给 DOM 元素的 class 控制的，但我真的不能在动态添加新的 DOM 元素时让它工作。似乎语义 ui javascript 只在第一页加载时得到运行而不是在我添加它们时在那些新元素上。目前，这是通过以下方式完成的：

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

有正确的方法吗？我在语义 UI 站点上找不到任何关于此的文档。

更新：举个更好的例子...

假设我有这样的布局：

<div class="right menu" id="rightMenu">
    <div class="ui dropdown link item">
      Courses
      <i class="dropdown icon"></i>
      <div class="menu">
        <a class="item">Petting</a>
        <a class="item">Feeding</a>
        <a class="item">Mind Reading</a>
      </div>
    </div>
    <a class="item">Library</a>
    <a class="item">Community</a>
  </div>
</div>

而这段代码是运行:

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)

新的菜单项看起来很好......但它实际上并没有像它应该的那样下拉，直到我运行这个：

$('.ui.dropdown')
  .dropdown({
    on: 'hover'
  });

之后，它在悬停时打开就好了。但是有没有办法不用每次都重新运行？

Answer 1

向 DOM 添加元素的方法很少。 html（清空容器然后插入新元素）就是其中之一。您还可以使用 append 将新元素附加到现有集合。但是，您的问题是关于动态添加的元素未触发的事件。解决方案是事件委托。阅读 more about it here.

From the jQuery doc: Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

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

var $container = $("#container");
var count = 3;

$container.on("click", 'button', function() {

    alert ("You've clicked on " + $(this).text() );
});

$("#addButtons").on("click", function() {

    $container.append("<button>Button" + (++count) + "</button>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <button>Button1</button>
    <button>Button2</button>
    <button>Button3</button>
</div>

<button id="addButtons">Add a few more!</button>

编辑： 即使动态添加语义 UI 元素，规则保持不变，因为它只是一个 element。我不确定您的页面上是否还有其他问题。查看下面更新的演示。

1) 使用 append

2) 使用 html

编辑： 所以，这就是语义 UI 下拉列表应该如何工作，因为下拉列表是 created/rendered by Javascript。因此，当添加新的options/dropdowns时，需要重新触发相关方法（$('.ui.dropdown').dropdown({on: 'hover'});）。另一种解决方法是将 simple class 添加到新创建的下拉列表中，即 var menu = '<div class="ui simple dropdown link item"> \ 当您将鼠标悬停时会触发下拉列表，但是。它没有动画！

希望对您有所帮助。

Answer 2

您可以将语义 jquery 调用放在一个函数中，然后在 appendTo 之后的回调中调用它 like

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

Answer 3

如 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'
  });

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

Correct Way to Dynamically Add Semantic UI Controls?

html

javascript

jquery

semantic-ui