jQuery appendTo 함수가 아약스 성공 함수 안에서 작동하지 않습니다.

Question

jQuery 아약스 메소드를 사용하여 일부 데이터를 가져 오려고합니다. 여기 내 코드 :

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

     } 
    }); 
}); 

데이터를 DB에서 가져 오는 중입니다. jquery 'each'함수가 잘 작동합니다. 'appendTo'기능이 작동하지 않습니다. 많은 브라우저에서 사용해 보았습니다. 그러나 같은 문제. 도와주세요. 고맙습니다.

Answer 1

은 사용자가 생각하는 바를 나타내지 않습니다.

당신은 아약스 호출 외부 테이블 요소를 발견하고 변수에 저장해야합니다 : 당신은 몇 가지 변수에 객체의 참조를 가지고 다음 각 루프에서 사용 할

$('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'을 의미한다.

당신이 다음 사용하여 새 만든 행을 추가, "OBJ"라는 varable의 현재 원소를 저장, 다음과 같은 코드를 작성해야

Answer 4

변수

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

도움이 될 수 있습니다.