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

Question

我正在努力思考 Semantic UI我明白一切都是如何由你给 DOM 元素的类控制的，但是当动态添加新的 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将新元素附加到现有集合。但是，您的问题是关于动态添加的元素未触发的事件。解决方案是事件委托(delegate)。阅读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 下拉列表应该如何工作，因为下拉列表是由 Javascript 创建/呈现的。因此，当添加新选项/下拉菜单时，需要重新触发相关方法($('.ui.dropdown').dropdown({on: 'hover'});)。另一个解决方法是添加 simple类到新创建的下拉列表，即 var menu = '<div class="ui simple dropdown link item"> \当你鼠标悬停时会触发下拉菜单，但是。它没有动画!

希望对您有所帮助。