dongqing4774
2016-08-01 13:08
浏览 141

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.

图片转代码服务由CSDN问答提供 功能建议

我正在尝试使用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(); \  n $ .each(结果,函数(键,元素)
 {
 
 $('&lt; tr class =“screenList1”&gt;&lt; td&gt;&lt;输入必需名称=“slotName”type =“text  “placeholder =”enter slot“&gt;&lt; input name =”screen_id1“required type =”hidden“value =”'+ element.screen_id +'“class =”screen_ids1“&gt;&lt; / td&gt;&lt; td&gt;&lt;  ; input required name =“movieName”type =“text”placeholder =“Movie Name”&gt;&lt; / td&gt;&lt; td&gt;&lt; input required name =“rate”type =“text”placeholder =“rate”&gt  ;&lt; / td&gt;&lt; / tr&gt;')。appendTo($(this).closest('table')); 
}); 
 
} 
}); 
}); \  n   
 
 

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • doushenjia8514 2016-08-01 13:19
    已采纳

    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);
               });
    
            }
        });
    
    });
    
    点赞 打赏 评论
  • dougongnan2167 2016-08-01 13:11

    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
                });
            }
        });
    });
    
    点赞 打赏 评论
  • dongyilai4214 2016-08-01 13:12

    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.

    点赞 打赏 评论
  • dongzhong1929 2016-08-01 13:14

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

    }); });

    点赞 打赏 评论
  • dongzang7182 2016-08-01 13:24

    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.

    点赞 打赏 评论

相关推荐 更多相似问题