ajaxでロードする要素を選択する方法

Question

id = "show"の要素をクリックすると、ajaxメソッドでデータを取得します。私はIDを<table>の中に入れた。私の問題は、ajaxでロードした後です。誰かがそれをクリックすると、各アイテム<i>を削除したいと思います。

<script> 
    $('#show').on('click',function(){ 
     $.ajax({ 
       url:"index.php", 
       method :"post", 
       success: function(data){ 
          for(var j in results){ 
           var data = results[j]; 
           $('tbody').append('<tr><td>'+data['name']+'</td><td>'+data['goods']+'</td><td>'+data['price']+'</td><td>'+data['date']+'</td><td><i id="'+data['id']+'" class="fa fa-times" aria-hidden="true"></i></td></tr>'); 
           } 
          } 
       }); 
    }); 

</script> 
<script> 
    $('i').on('click', function(){ 
    var id = $(this).attr('id'); 
    $.ajax({ 
      data:id, 
      url: "delete.php" 
     }); 
    }); 
</script> 

しかし残念ながら、私は<i>を選択して削除することはできません。

Answer 1

を試してみてください。 dataを{}に渡す必要があります。以下を確認してください：

$('i').on('click', function() { 
    var id = $(this).attr('id'); 
    $.ajax({ 
    async: false, 
    url: 'delete.php', 
    data: { 
     id: id 
    }, 
    type: "POST", 
    dataType: "json", 
    success: function(data) { 
     // code here... 
    } 
    }); 
}); 

Answer 2

はあなたのAJAXを更新する必要があり、この

$(document).on('click', 'i', function(){ 
    var id = $(this).attr('id'); 
    $.ajax({ 
      data:id, 
      url: "delete.php" 
     }); 
    });