在获取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(); 

}); 

});