Как добавить событие в содержимое боковой панели в семантике ui?

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

Это спекулятивный, как я не знаю, знаково-интерфейс достаточно хорошо, чтобы быть уверенным, но это вполне возможно, что это результат того, что узлы, содержащие боковую панель, перемещаются внутри DOM, когда боковая панель инициализирована. Это то, что заставляет обработчики событий терпеть неудачу с модалами в Semantic-UI, Foundation и Bootstrap.

Приемники событий прикреплены к экземпляру шаблона, который первоначально содержал узлы шаблона, но если эти узлы затем перемещаются в DOM (семантическими-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 вместо.