Cannot add click events to dynamic generated list items by jquery

Question

Jquery Code

this is my jquery function for retrieving list or categories from database which is dynamically genrated by jquery function, I have added click event on each of the generated list items. But its not giving any alert on click.

 <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>

Controller

<?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);
    }
}
?>

Model function

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

First don't use id if the elements are multiple as id must be unique, use class instead and use event delegation like,

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