无法通过jquery将点击事件添加到动态生成的列表项

Question

Jquery代码

这是我的jquery函数，用于从数据库中检索由jquery函数动态生成的列表或类别，我在每个生成的列表项上添加了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>

控制器

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