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

Question

我正在使用流星。 我使用语义UI添加了侧边栏，但是当我在侧边栏选项中检查click事件时，未调用我的函数。

边栏代码：

<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，但很有可能这是由于初始化侧边栏后，包含侧边栏的节点在DOM内然后在DOM中移动的结果。 这就是导致事件处理程序因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 。