Question

我正在使用流星。我使用semantic-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内移动的结果。这就是导致事件处理程序在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中添加侧栏内容上的事件？

1 个答案: