CODEWITHSUNDEEP
jqueryajax
korush
korush

Reputation: 55

how to select element which is load by ajax

I retrieve data by ajax method if user click on element with id="show". then I put id inside of <table>. my problem is after loading by ajax I want to delete each item <i> if someones click on it.

<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>

But unfortunately I can't remove with selecting <i>.

Upvotes: 0

Views: 38

Answers (2)

Milan Chheda
Milan Chheda

Reputation: 8249

You need to update your AJAX. You need to pass data in {}. Check below: 

$('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...
    }
  });
});

Upvotes: 1

Manoj
Manoj

Reputation: 5071

Try this

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

Upvotes: 0

Related Questions