Question

我是ajax世界的新手，并希望你们能帮忙。

目前，我可以通过ajax动态创建项目列表。我遇到的问题是，当我点击ajax创建的列表项时，它会显示所有列表项。我只想显示我点击的列表项。

下面是一段代码片段，可以让您了解我正在尝试做什么。

  $(document).ready(function() {

$('div.calendar_content').click(function() {
    $('#product_list ol li').remove();
        day_num = $(this).prev().text();
        if(day_num.length == 1)
        {
            day_num = 0 +day_num;
        }
        today_date = <?=$year ?> +'-'+<?= $month; ?>+'-' +day_num;

        $.ajax({
            type: "POST",
            url: "<?= site_url()?>/admin/post_rooms",
            data: {'today_date':today_date},
            dataType: 'json',
            success: function(data){
                $.each(data.returned_val, function(key,value){
                    content = '<li id='+value.res_id+'>Dorm Room '+ value.room_no +' '+value.first_name+' '+value.last_name+'</li>';    
                    $(content).appendTo("#product_list ol");
                });
            }
        }); 
   });

   $("#product_list ol ").click(function(){
        alert($('#product_list ol li').text());
   });
});

Answer 1

$("#product_list ol li").on('click', function(){
   alert($(this).text());
});

Answer 2

success: function(data){  
    $.each(data.returned_val, function(key,value){
        content = '<li id='+value.res_id+'>Dorm Room '+ value.room_no +' '+value.first_name+' '+value.last_name+'</li>';    
        $(content).appendTo("#product_list ol");
    });
    //The hiding part
    $("#product_list ol > li").click(function(){
        $(this).siblings().hide();
    });
}

通过这种方式，您可以在生成列表项后在列表项上注册。当您单击该项时，该函数将获取所有项目的siblings并隐藏它们。

ajax / jquery help - 单击时显示动态创建的列表项

2 个答案: