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

Question

jQuery 代码

这是我的 jquery 函数，用于从由 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();
});