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

它可能會有幫助。