Q:

jquery mobile button refresh not working programmatically

I have a table that is added dynamically to the dom row by row. every row has a button in the last'' of the row. With the option to remove.
I am having problems getting the id of the button or any attribute. However the styles are applied. 
function makeLeague(){
var tableStart = "<table style='min-width:100%;' id='league-table-custom' class='league-table ui-responsive' data-mode='reflow'><th>TEAM</th><th>PLD</th><th>W</th><th>D</th><th>L</th><th>GF</th><th>GA</th><th>GD</th><TH>PTS</TH><th></th>";
var tableEnd = "</table>";
var tableMid = '' ;
var secondtab = $('#demo1');

leagueSize = league.length;

for(k=0; k<league.length; k++){
tableMid += "<tr>";
for(i=0; i< 9; i++){
tableMid += "<td> " + league[k][i] + "</td>";

}
tableMid += "<td><input type='button' class='remove' value='"+k+"' id="+k+"></td></tr>";

}

secondtab.html(tableStart + tableMid + tableEnd).trigger('create');
$('#demo1').trigger('create'); //tried many combinations/and on own
$('.remove').button();
$('.remove').trigger('create');
}

$('.remove').on('click',function(){
   console.log ($(this).attr.id);});

Does anyone have any suggestions where I am going wrong here. I read the jquery mobile docs and they state that the styled button get wrapped in a div. Would this effect my access? Or can I construct the function in a better way that will eliminate any issues.

A:

I got this working I had to traverse the dom a little bit more. When getting the value I typed $('#pageone').on('click', 'table .remove',function(){ console.log ($(this).attr('id')); }); and it works. Not sure that is normal behavior and hope it works on all browsers. thanks for any input.
Instead of $('.remove').on('click',function(){
   console.log ($(this).attr.id);});

