jQuery无法将点击事件添加到动态生成的列表项中 [英] Cannot add click events to dynamic generated list items by jquery

问题描述

这是我的jquery函数，用于从由jquery函数动态生成的数据库中检索列表或类别，我在每个生成的列表项上添加了click事件.但是它不会给点击带来任何警告.

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>

控制器

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

推荐答案

如果元素为多个，则不要使用 id ，因为 id 必须是唯一的，请使用<代替code> class 并使用事件委托，如

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

这篇关于jQuery无法将点击事件添加到动态生成的列表项中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！