不能用jQuery的添加点击事件动态生成的列表项

Question

jQuery代码

这是我检索列表或数据库类别，其动态的jQuery功能genrated jQuery的功能，我在每一个所产生的加单击事件列出项目。但它没有提供任何关于点击的警报。

<script type="text/javascript" src="<?= base_url('assets/js/jquery.js'); ?>"></script> 
    <script type="text/javascript" src="<?= base_url('assets/js/jquery.min.js'); ?>"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<script> 
$(document).ready(function() { 

      getlevel1category(); 


      $('#cat').click(function() { 
       alert(); 
      }); 

      function getlevel1category() { 
       $.ajax({ 
        type:'POST', 
        url: "<?php echo base_url(); ?>" + "HomeController/getLevel1Categories", 
        async: true, 
        dataType: 'json', 
        success: function (data) { 

         var html=''; 
         var i; 
         for(i=0;i<data.length;i++) 
         { 

          html +='<li id="cat">'+data[i].Name+'</li>'; 


         } 
         $('#level1').html(html); 
        }, 
        error: function() { 
         alert('Could not get data'); 
        } 
       }); 
      } 
} 
</script> 

控制器

<?php 

class HomeController extends CI_Controller 
{ 
    public function __construct() 
    { 
     parent::__construct(); 
     $this->load->model('HomeModel'); 
    } 

    public function getLevel1Categories() 
    { 
     $result = $this->HomeModel->getLevel1Categories(); 


     echo json_encode($result); 
    } 
} 
?> 

型号功能

public function getLevel1Categories() 
    { 
     $this->db->select() 
      ->from('category_level1_tbl'); 
     $query = $this->db->get()->result(); 
     return $query; 
    } 

HTML

<div> 
    <div> 
     <h3>Level 1 Categories</h3> 
    </div> 
    <div > 
     <ul id="level1"> 

     </ul> 
    </div> 
</div> 

Answer 1

先不使用id如果这些元素作为多id必须是唯一的，使用class，而不是和使用事件代表团一样，

$('#level1').on('click','.cat',function() { 
    alert(); 
});