jquery appendTo函数在ajax成功函数内不起作用

I'm trying to fetch some data using jQuery ajax method. here is my code:

$('body').on('click','.showSlots', function() {
var screen_Id = $(this).attr('id');
//alert(screen_Id);

$.ajax({
    url:base_url+'admin/movies/getScreenSlots',
    type:'post',
    data: {screen_Id:screen_Id},
    success: function(result)
    {   

      result = $.parseJSON(result);
      //$('.screenList1,.screenList12').empty();   
      $.each(result, function( key, element )
      {

                    $('<tr class="screenList1"><td><input required name="slotName" type="text" placeholder="enter slot"><input name="screen_id1" required type="hidden" value="'+element.screen_id+'" class="screen_ids1"></td><td><input required name="movieName" type="text" placeholder="Movie Name"></td><td><input required name="rate" type="text" placeholder="rate"></td></tr>').appendTo($(this).closest('table'));
        });

      }
   });
});

Data successfully getting from DB. and jquery 'each' function working well. but 'appendTo' function not working. Tried in many browser. But same problem in all. please help. Thank you.

this does not refer to what you think it does.

You should find the table element outside the ajax call, and save to a variable:

$('body').on('click','.showSlots', function() {

    var screen_Id = $(this).attr('id');
    var table = $(this).closest('table');

    $.ajax({
        url:base_url+'admin/movies/getScreenSlots',
        type:'post',
        data: {screen_Id:screen_Id},
        success: function(result){   

          result = $.parseJSON(result); 
          $.each(result, function( key, element ){
              $('...your html...').appendTo(table);
           });

        }
    });

});

The problem with your implementation is current element context this does't refer to clicked showSlots in the success handler.

Store the reference of the table in a variable and use it while appending html.

$('body').on('click', '.showSlots', function() {
    var table= $(this).closest('table'); //Store the reference
    $.ajax({
        success: function(result) {                
            $.each(result, function(key, element) { 
                $('<tr ></tr>').appendTo(table); //Use it
            });
        }
    });
});

Change this line:

appendTo($(this).closest('table'));

to 

appendTo($('.showSlots').closest('table'));

because $(this) do not refers to '.showSlots' as you are in another function of ajax call.

you should write your code like this, save the current element in a varable called "obj", then add the new created row using that variable

$('body').on('click','.showSlots', function() {
var screen_Id = $(this).attr('id');
var obj=$(this);
$.ajax({
    url:base_url+'admin/movies/getScreenSlots',
    type:'post',
    data: {screen_Id:screen_Id},
    success: function(result)
    {   
         result = $.parseJSON(result); 
         $.each(result, function( key, element )
         {
              $('<tr class="screenList1"><td><input required name="slotName" type="text" placeholder="enter slot"><input name="screen_id1" required type="hidden" value="'+element.screen_id+'" class="screen_ids1"></td><td><input required name="movieName" type="text" placeholder="Movie Name"></td><td><input required name="rate" type="text" placeholder="rate"></td></tr>').appendTo($(obj).closest('table'));
    });

  }

}); });

You have to take reference of object in some variable and then use it in the each loop. You can do it like folloing :-

$('body').on('click','.showSlots', function() {
var screen_Id = $(this).attr('id');
$this = $(this);
//alert(screen_Id);

$.ajax({
    url:base_url+'admin/movies/getScreenSlots',
    type:'post',
    data: {screen_Id:screen_Id},
    success: function(result)
    {   

      result = $.parseJSON(result);
      //$('.screenList1,.screenList12').empty();   
      $.each(result, function( key, element )
      {

                    $('<tr class="screenList1"><td><input required name="slotName" type="text" placeholder="enter slot"><input name="screen_id1" required type="hidden" value="'+element.screen_id+'" class="screen_ids1"></td><td><input required name="movieName" type="text" placeholder="Movie Name"></td><td><input required name="rate" type="text" placeholder="rate"></td></tr>').appendTo($this.closest('table'));
        });
      }
   });
});

It may helpful.