jquery appendTo函数不工作里面的Ajax成功函数

Question

我想使用jQuery ajax方法获取一些数据。这里是我的代码：

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

     } 
    }); 
}); 

成功从数据库获取数据。和jQuery的'每个'功能运作良好。但'appendTo'功能不起作用。尝试了很多浏览器。但同样的问题。请帮忙。谢谢。

Answer 1

this并不是指你认为它的作用。

你应该找到Ajax调用表之外元素，并保存到一个变量：

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

     } 
    }); 

}); 

Answer 2

您的实现问题是当前元素上下文this在成功处理程序中未引用单击showSlots。

将表的引用存储在变量中，并在附加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 
      }); 
     } 
    }); 
}); 

Answer 3

改变这一行：

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

to 

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

因为$（这）不要指的是” .showSlots'因为你是在Ajax调用的另一个函数。

Answer 4

你应该写你这样的代码，保存当前的元素被称为“目标文件” varable，然后使用添加新创建的行变量

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

    } 

}）; }）;

Answer 5

你必须采取一些变量对象的引用，然后在每个循环使用。你可以像下面这样做： -

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

它可能会有帮助。