Функция 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 под названием «OBJ», а затем добавить новую созданную строку, используя этот переменной

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

Это может быть полезно.