Cannot add click events to dynamic generated list items by jquery : <h1>Jquery Code</h1>

<p>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.</p>

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

&lt;script&gt;
$(document).ready(function() {

            getlevel1category();


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

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

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

                            html +='&lt;li id="cat"&gt;'+data[i].Name+'&lt;/li&gt;';


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

<h1>Controller</h1>

<pre><code>&lt;?php

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

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


        echo json_encode($result);
    }
}
?&gt;
</code></pre>

<h1>Model function</h1>

<pre><code>public function getLevel1Categories()
    {
        $this-&gt;db-&gt;select()
            -&gt;from('category_level1_tbl');
        $query = $this-&gt;db-&gt;get()-&gt;result();
        return $query;
    }
</code></pre>

<h1>html</h1>

<pre><code>&lt;div&gt;
    &lt;div&gt;
        &lt;h3&gt;Level 1  Categories&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div  &gt;
        &lt;ul id="level1"&gt;

        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
