如何在语义 ui 侧边栏内容上添加事件？

Question

我正在使用流星。我使用 semantic-ui 添加了一个侧边栏，但是当我在侧边栏选项中检查点击事件时，我的函数没有被调用。

侧边栏代码：

<div id="iconBar" class="ui left vertical menu blue labeled icon iconBar sidebar">
<div id="serach" class="side">
    <div class="container">
        <div class="ui huge list">
            <div class="item">
                <i class="search icon"></i>
                <div class="content">
                    <a class="xyz">Search</a>
                </div>
            </div>
        </div>
        <div class="ui divider">
        </div>
    </div>
</div>

在我的 JS 中：

'click #serach': function() {
        alert('hello');
}

Answer 1

这是推测性的，因为我不太了解 Semantic-UI 可以肯定，但这很可能是包含边栏的节点在 [=23= 内移动的结果] 当侧边栏初始化时。这就是导致事件处理程序在 Semantic-UI、Foundation 和 Bootstrap.

中使用模态失败的原因

事件侦听器附加到最初包含模板节点的模板实例，但如果这些节点随后在 DOM 内移动（通过 Semantic-UI 的侧边栏初始化或其他），事件将不会通过那些处理程序正在监视的包含节点冒泡。

规范的解决方案是确保将事件处理程序附加到模板，该模板要么被整体移动，要么根本不移动，这样您就可以确定事件仍会通过相关节点冒泡。在这里，这意味着您需要在侧边栏中放置一个子模板（以便在初始化时全部移动）：

<div id="iconBar" class="ui left vertical menu blue labeled icon iconBar sidebar">
  {{> sidebarContents}}
</div>

<template name="sidebarContents">
  <div id="serach" class="side">
    <div class="container">
      <div class="ui huge list">
        <div class="item">
          <i class="search icon"></i>
          <div class="content">
            <a class="xyz">Search</a>
          </div>
        </div>
      </div>
    <div class="ui divider">
    </div>
  </div>
</template>

然后将您的事件处理程序附加到 Template.sidebarContents。

如何在语义 ui 侧边栏内容上添加事件？

How to add a event on sidebar content in semantic ui?

meteor

semantic-ui