ajax/jquery help - クリックしたときに動的に作成されたリスト項目を表示する

Question

私はajaxの世界を初めて知り、皆さんが助けてくれることを願っていました。

現在、私はajaxを使用してアイテムのリストを動的に作成できます。私が実行している問題は、ajaxで作成されたリスト項目をクリックすると、すべてのリスト項目が表示されることです。私はクリックしたリスト項目を表示したいだけです。

以下は、私が何をしようとしているのかを示すコードスニペットです。あなたがそれらを生成したのaferあなたは、リスト項目のクリックイベントを登録する。このように

$(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を取り出し、それらを非表示にします。