Selecting all tags created when clicking on a class

Hello, dear colleagues, I have a difficult question for you. I made a request to the server in this way

$(".click_top").click(function () {
    window.topid = $(this).attr("topid");
    window.semestr = $(this).attr("semestr");
    window.kurs = $(this).attr("kurs");
    $.post( <? php echo '"'.base_url(); ?> ofis_reg / dekanat / itogxml ", {fm_id: fm_id,top_id: topid,kurs: kurs,semestr: semestr},
    function (xml){
        $(".bg_ul ").html("");
        $(xml).find('pred').each(function() {
            pred_name = $(this).find('pred_name').text();
            pred_id = $(this).find('pred_id').text();
            $(".bg_ul ").append('<li value="'+pred_id+'">'+pred_name+'</li>');
        });
    });
});

Here is the html

<ul class="bg_ul"></ul>
<table>
    <tr>
        <td class="bleft click_top"  topid="<?php echo $toptar[$i]["top_id"]?>" kurs="<?php echo $toptar[$i]["kurs"]?>" semestr="<?php echo $toptar[$i]["semestr"]?>"><?php echo $toptar[$i]["top_name"]?></td>
        <td align="center" class="click_top" topid="<?php echo $toptar[$i]["top_id"]?>" kurs="<?php echo $toptar[$i]["kurs"]?>" semestr="<?php echo $toptar[$i]["semestr"]?>"><?php echo $toptar[$i]["kurs"]?></td>
        <td align="center" class="click_top" topid="<?php echo $toptar[$i]["top_id"]?>" kurs="<?php echo $toptar[$i]["kurs"]?>" semestr="<?php echo $toptar[$i]["semestr"]?>"><?php echo $toptar[$i]["semestr"]?></td>
    </tr>
</table>

The task is to select all the <li>tags that are generated when clicking on the click_topclass.

<ul class="bg_ul">
</ul>

My method

$('.bg_ul>li').click(function(){
    alert("OK");
});

not working and why? If I don’t generate these <li>tags and just paste them into html, does it work fine?


Answer 1, authority 100%

Your code, apparently, works on the $(document).ready()event, at this moment all event processing is hung up on the page elements. Accordingly, if the element does not yet exist, there is nothing to hang a reaction to a click on. And at the moment when you have generated the element, no function that hangs this click handling is launched. Those. you either need to immediately generate elements with processing, like this, if in a simple way

$('< ul>').attr('class','bg_ul').click(function(){...}).appendTo(...);

or use the livemethod suggested above, which can hang events on dynamic elements.


Answer 2, authority 100%

The event is not picked up for dynamically created elements, use

.live('click', function(){})

update:way is really easy and simple, but check out @zippp, he explained the essence of the occurrence of such a problem and proposed to hang an event on the elements directly when they are created. The only thing is that in the code that he proposed, the event is not hung on <li> <ul> - $('< ul>').attr('class','bg_ul').click(), maybe that’s why something didn’t work. I think it’s better to use his approach, but only tweak the code

function (xml){
        var bg_ul = $(".bg_ul ").html("");
        $(xml).find('pred').each(function() {
            pred_name = $(this).find('pred_name').text();
            pred_id = $(this).find('pred_id').text();
            var bg_ul_li = $('<li value="'+pred_id+'">'+pred_name+'</li>')
            .click(function(){alert('ok')});
    $(".bg_ul ").append(bg_ul_li);
        }