jquery 'on()' doesn't work

Question

I wrote a blog manage system. And I want to update the blog list dynamically, while I found it that after the old function added the list, the new fun can't delete the old list. They just put a new list on the old list, then the some parts of list became duplicated. I use the on() in jQuery but it can't find out the generated divs. here is the html part:

<div class="col-xs-2 admin-content" id="blogtable">
    <h3>blog list</h3>
                    <div class="col-xs-12 admin-list">
        <h4><a id="addblog" href="#"><span class="glyphicon glyphicon-pencil"> add blog</a></h4>
    </div>
</div>

here is the js part:

$(document).ready(function () {
    // body...
    var blogstate = false;
    var newblog = true;
    $('#blogtable').on('click',function  () {
        console.log('updating')
        console.log($(this).children('.blog-list'))
        $.get('http://127.0.0.1:5000/getbloglist',function (data,status) {
        $.each(data, function(i) {// init the new list
            var stringdiv = '<div class="col-xs-12 blog-list"><a href="#" class="blog-unit" id="'+data[i]['id']+'"><h5>'+data[i]['title']+'</h5></a><h6><em>'+data[i]['date']+'</em></h6></div>'
            $('#bloglist').prepend(stringdiv);
        });
        itemclick();
        //sendblog();
        });
    });


    $('#blogb').click(function () {
        console.log('bbbb')
        getbloglist()
        return false;
    });
    sendblog();
    whenaddblog();
});

here is the getbloglist():

function getbloglist() {
    $(".blog-list").remove();//remove the old list
    //get the list of blog and show it on the list part

    $.get('http://127.0.0.1:5000/getbloglist',function (data,status) {
        $.each(data, function(i) {// init the new list
            var stringdiv = '<div class="col-xs-12 blog-list"><a href="#" class="blog-unit" id="'+data[i]['id']+'"><h5>'+data[i]['title']+'</h5></a><h6><em>'+data[i]['date']+'</em></h6></div>'
            $('#bloglist').prepend(stringdiv);
        });
        itemclick();
        //sendblog();
    });
};

Actually, I got n [] (0) in the console. I wander why this happened.

I use the $('#blog').delegate('#blogtable','click',function () { instead of on() , but it doesn't work at ll

Answer 1

T.Cheng, first, try to correct the class declaration of the div tag

div "col-xs-12 blog-list"

to

div class="col-xs-12 blog-list"

than, second, use the id of the main tag to get the chindren tags

$("#blogtable").children('.blog-list') or $("#blogtable").find('.blog-list')

instead of

$(this)