JS AJAX scope issue

Question

Я получаю идентификатор undefined_content, и я не могу найти почему.

Я угадываю область действия, но я не вижу, где я здесь.

var extraInfoHTML - это точка, которая получает неопределенный идентификатор id и rowID переменной, которая не определена.

$(function(){ 
    var rowID; 

     $('.entryx').on('click', function(rowID){ 
      pid = $(this).attr('profileid'); 
      rowID = $(this).attr('id'); 

      $('.additionInfo_dropDown').hide(); 
      $(this).after("<tr class='additionInfo_dropDown'><td colspan=6>"+extraInfoHTML+"</td></tr>"); 

     populateExtra(rowID , pid); 



     //alert(derp); 
     }); 

    var extraInfoHTML = "<div id='"+ rowID +"_content' class='profileInfoDropDown'>"+ 
         "DERPINGTONS"+ 
         "</div>";    
    }); 

function populateExtra(rowID , pid) { 
    $.ajax({ 
     type: "POST", 
     url: "admin_populate_profile.php", 
     data: { rowID : rowID, 
       pid: pid 
      } 
    }).success(function(datareturn) { 
     idx = rowID +'_content'; 
     $("#"+idx).html(datareturn); 
     alert(datareturn); 
    }); 
} 

Answer 1

Это потому, что extraInfoHTML устанавливается в document.ready случае. Другими словами, текст конкатенируется и rowId оценивается до того, как вы присвоите ему какое-либо значение. Вы назначаете значение rowId только в обработчике событий клика .entryx.

Изменение порядка может решить, что:

$(function(){ 
    var rowID; 

    $('.entryx').on('click', function(rowID){ 
     pid = $(this).attr('profileid'); 
     rowID = $(this).attr('id'); 
     var extraInfoHTML = "<div id='"+ rowID +"_content' class='profileInfoDropDown'>"+ 
         "DERPINGTONS"+ 
         "</div>";  
     $('.additionInfo_dropDown').hide(); 
     $(this).after("<tr class='additionInfo_dropDown'><td colspan=6>"+extraInfoHTML+"</td></tr>"); 

     populateExtra(rowID , pid); 
     //alert(derp); 
     });  
    });