jQuery点击事件不附加到淘汰赛模板

Question

我有一个附加到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

你要它总是可见的外部部件上添加点击事件监听器（因为它不”不需要隐藏的元素）。然后换模板代码（这是隐藏的）添加其他选择

示例代码如下：

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

Answer 2

如果您希望处理程序上，将在未来创建的元素工作，你应该使用on：http://api.jquery.com/on/