在獲取json ajax數據後點擊hedings時出現問題

Question

當按下按鈕從php獲取json ajax數據時，點擊表格標題（asc，dsc）時出現問題，這些數據來自構建我的表格的php。我使用函數sortresult按表標題排序表中的值。函數排序結果構建我的表。 我recive json數據成功。

如果我不使用按鈕來顯示數據（只是一個點亮的位更改代碼），automaticaly讓json用ajax和創建表，然後點擊工作正常。沒有使用按鈕的問題是什麼問題？

所以我有功能：

$(document).ready(function(){ 
    $('#submit').click(function(event){ 
     $('#headings th').click(function(){ 
      $('#results').html(""); 
     var id=$(this).attr('id'); 
     var asc =(!$(this).attr('asc')); 
     $('#headings th').each(function() { 
      $(this).removeAttr('asc'); 
     }); 
      if(asc) $(this).attr('asc','asc'); 
     sortResult(id, asc); 
     }); 
    showResult(); 
}); 
}); 

功能sortResult：

function sortResult(prop, asc){ 
     var val=null; 
     dataOut = dataOut.sort(function(a,b){ 
     if(asc) return (a[prop] > b[prop]); 
      else return (b[prop] > a[prop]); 
     }); 
     showResult(); 
} 

功能showresult：

function showResult(){ 
     var html=''; 
     for (var i in dataOut){ 
      html +='<tr>' 
      +'<td>'+dataOut[i].email+'</td>' 
      ... 
      +'</tr>' 
     } 
     html+='</table>' 
     $('#results').html(html); 
} 

Answer 1

因爲你動態創建的元素，你需要爲與註冊事件on：

$(document).ready(function(){ 
    $(body).on("click", "#headings th", function(){ 
     $('#results').html(""); 
     var id=$(this).attr('id'); 
     var asc =(!$(this).attr('asc')); 
     $('#headings th').each(function() { 
       $(this).removeAttr('asc'); 
     }); 
     if(asc) $(this).attr('asc','asc'); 
     sortResult(id, asc); 
    }); 
    $('#submit').click(function(event){ 
     showResult(); 
    }); 
}); 

Answer 2

如果您點擊的元素是由ajax請求添加的，您將需要使用jQuery的'on'而不是'click'。

http://api.jquery.com/on/

$(document).ready(function(){ 
    $('#submit').click(function(event){ 
     $('#headings th').on('click', function(){ 
      $('#results').html(""); 
      var id=$(this).attr('id'); 
      var asc =(!$(this).attr('asc')); 
      $('#headings th').each(function() { 
       $(this).removeAttr('asc'); 
      }); 
      if(asc) $(this).attr('asc','asc'); 
      sortResult(id, asc); 
     }); 
     showResult(); 
    }); 
}); 

Answer 3

它不工作，我Actualy代碼如下。正如你所看到的，我有兩個相同的功能。但是在準備好與ajax之後另一個是自己的功能。但問題是：如果我把函數放在裏面（function（data）{HERE}），它就不能工作。主要問題是dataOut（全局變量）我不能在sortResult函數中使用asc/desc。如果wolud有對於數據出靜態數組（下面顯示）insted的從PHP傳遞的數據爲JSON它會很好地工作的。我不明白爲什麼我不能編輯我的陣列，或wher的問題。

var dataOut = [ 
      { 
     field_surname:'Sparow', 
     field_name:'jack', 
     field_date: '13.2.1988', 
     field_timestamp: '31.9.2012 20:20:12' 
      }, 
      { 
     field_surname: 'Pik', 
     field_name:'Jany', 
     field_date: '5. 10. 1978', 
     field_timestamp: '31.9.2013 15:15:12' 
    }, 
    { 
     field_surname: 'Micky', 
     field_name:'mouse', 
     field_date: '15. 7. 1978', 
     field_timestamp: '31.9.2013 8:10:12' 
    } 
]; 




     $(document).ready(function(){ 
      $('#submit').click(function(event){ 
    var phpScript="handle2.php"; 
     $.getJSON (phpScript, { 
     //tags:""; 
     tagmode:"any", 
     format:"json", 
    }) 
    .done(function (data){ 

    dataOut = JSON.parse(JSON.stringify(data)); 
    showResult(); 
    }); 
    $("#message").ajaxError(function(event, request, settings){ 
     $(this).show(); 
     $(this).append("<li>Error requesting page " + settings.url + "</li>"); 
    }); 
}); 

// 


$('#headings th').on('click', function(){ 
    var id=$(this).attr('id'); 
    //alert("id"+id); 
    var asc =(!$(this).attr('asc')); 

$('#headings th').each(function() { 
    $(this).removeAttr('asc'); 
}); 
if(asc) $(this).attr('asc','asc'); 
alert(asc); 
    sortResult(id, asc); 
    showResult(); 

}); 

});