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

Question

我正试图围绕Semantic UI,我理解一切是如何由你给DOM元素的类控制的,但是当动态添加新的DOM元素时,我无法真正做到这一点.似乎语义ui javascript只在第一页加载时运行,而不是在我添加它们时在这些新元素上运行.目前,这只是通过以下方式完成:

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

有没有正确的方法来做到这一点？我在Semantic 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将新元素附加到现有集合.但是,您的问题是关于动态添加元素未触发的事件.解决方案就是事件委托.在这里阅读更多相关信息.

从jQuery doc:Delegated事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件.通过选择在附加委托事件处理程序时保证存在的元素,您可以使用委派事件来避免频繁附加和删除事件处理程序的需要.

这是一个关于添加新元素,事件爆燃等的快速演示.希望有所帮助.

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

编辑:那么,当Javascript创建/呈现下拉列表时,语义UI下拉应该如何工作.因此,当添加新的选项/下拉列表时,$('.ui.dropdown').dropdown({on: 'hover'});需要重新触发相关的方法().另一种解决方法是将simple类添加到新创建的下拉列表中,即var menu = '<div class="ui simple dropdown link item"> \鼠标悬停时会触发下拉列表,但是.它没有动画!

希望有所帮助.