如何響應ul li在jQuery中單擊

Question

我在引導面板中嵌入了以下無序列表。用戶在運行時動態添加項目。

<div class="row"> 
     <div class="col-md-2 panel panel-default"> 
      <div class="panel-heading">Species Seen</div> 
      <div class="panel-body" style="height: 400px; overflow:auto"> 
       <ul id="speciesAdded" class="list-group"> 
       </ul> 
      </div> 
     </div> 
</div> 

我試圖通過jQuery的點擊項目之一的用戶響應：

$(document).ready(function() { 
     $('ul#speciesAdded li').click(function() { 
      alert($(this).text()); 
     }); 
    }) 

看來我沒有的東西有線正確的，因爲警報永遠不會顯示。

Answer 1

由於列表項是不存在的創建頁面時，所有的事件將無法使用這些元素，在這種情況下，你需要爲事件附加到這些新添加的列表項申請event delegation：

$('#speciesAdded').on('click','li',function() { 
    alert($(this).text()); 
});