jQuery Нажмите событие, не прикрепленное к шаблону нокаута

Question

У меня есть блок кода, прикрепленный к событию click jQuery. Вот элемент:

<!-- Profiles --> 
<div class="profiles"> 
    <h1>Profiles</h1> 
    <div class="profile"> 
     <div class="name"> 
      <input type="text" maxlength="14" value="Default" /> 
      <span class="rename">q</span> 
     </div> 
     <div class="controls"> 
      <span class="edit">EDIT</span> 
      <span class="duplicate">COPY</span> 
      <span class="delete default">J</span> 
      <div class="alert-box"> 
       <p>Are you sure you want to delete this profile?</p> 
       <div>Y</div> 
       <div>N</div> 
      </div> 
     </div> 
     <div class="saved"> 
      <span class="cancel-button">Cancel</span><span class="save-button">Save</span> 
     </div> 
    </div> 
</div> 

Когда элемент выбран, он становится доступен для редактирования. Вот слушатель события:

 $('.rename').click(function() { 
      $('.selected .rename').fadeIn(80); 
      $(this).fadeOut(80); 
      $(this).parent().addClass('selected'); 
     }); 

Там другое событие, которое слушает за клик в любом другом месте на странице, чтобы отменить выбор пункта редактируется:

 $(document).click(function() { 
      $(".selected .rename").fadeIn(80); 
      $('.name').removeClass('selected'); 
     }); 

Когда она нажата, то это должно быть выбрано разрешить редактирование. Когда я перемещаю код из profile в шаблон нокаута, он больше не прослушивает событие клика. Когда я проверяю слушателей событий в инструментах Chrome, слушателя нигде не найти. Вот что мой шаблон выглядит следующим образом:

  <div class="profiles"> 
       <h1>Profiles</h1> 

       <div data-bind="template: { name: 'profilestempl', foreach: $root.profiles }"></div> 
      </div> 

     <script type="text/html" id="profilestempl"> 
      <div class="profile"> 
       <div class="name"> 
        <input type="text" maxlength="14" data-bind="value: name" /> 
        <span class="rename">q</span> 
       </div> 
       <div class="controls"> 
        <span class="edit">EDIT</span> 
        <span class="duplicate">COPY</span> 
        <span class="delete">J</span> 
        <div class="alert-box"> 
         <p>Are you sure you want to delete this profile?</p> 
         <div>N</div><div>Y</div> 
        </div> 
       </div> 
       <div class="saved"> 
        <span class="cancel-button">Cancel</span><span class="save-button">Save</span> 
       </div> 
      </div> 
     </script> 

Может кто-нибудь объяснить мне, почему слушатель события больше не работает на динамически добавляемых элементов? Я также хотел бы помочь в решении этой проблемы. Благодаря!

Answer 1

Вы должны добавить прослушиватель событий нажмите на внешний элемент, который всегда виден (так как она Безразлично» t работа над скрытыми элементами). А затем добавить другой селектор для кода шаблона (который скрыт)

Пример кода будет:

function addClickEventToCloseButton(){ 
    $("#outerAlwaysVisible").on('click','#templateHiddenInitially',function(){ 
     alert('works') 
    }); 
} 

Answer 2

Если вы хотите, чтобы обработчик для работы на элементах, которые будут созданы в будущем, вы должны использовать on: http://api.jquery.com/on/