jquery appendTo 函数在 ajax 成功函数中不起作用答案

【问题标题】：jquery appendTo function not working inside ajax success functionjquery appendTo 函数在 ajax 成功函数中不起作用
【发布时间】：2016-12-06 14:07:51
【问题描述】：

我正在尝试使用 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 'each' 函数运行良好。但“appendTo”功能不起作用。在许多浏览器中尝试过。但同样的问题。请帮忙。谢谢。

【问题讨论】：

你也能显示你的html吗？
当您在 .each 函数中引用“this”时，它会引用您正在循环的数组中的当前项。
嗨@Sean Wessell 那是问题！！。问题现已解决，非常感谢 Sean Wessell..

标签： php jquery json ajax append

【解决方案1】：

您应该这样编写代码，将当前元素保存在名为“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'));
    });

  }

}); });

【讨论】：

请记住添加关于您已更改/应该更改的内容的评论。

【解决方案2】：

您必须在某个变量中引用对象，然后在每个循环中使用它。你可以这样做：-

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

这可能会有所帮助。

【讨论】：

我已经将 $(this) 的引用存储在变量中，然后在每个循环内的 AJAX 的成功部分中使用它。
你能试试这个吗？
@user3706231 我想你只是忘记了那个小错误。

【解决方案3】：

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

        }
    });

});

【讨论】：

【解决方案4】：

您的实现的问题是当前元素上下文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
            });
        }
    });
});

【讨论】：

【解决方案5】：

改变这一行：

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

to 

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

因为 $(this) 不像您在 ajax 调用的另一个函数中那样引用“.showSlots”。

【讨论】：