Ajax query not working after page is reloaded - ajax

Question

I have 2 ajax query as below, and both the ajax query is working on the initial page loading, after loading data using 1st AJAX query the 2nd ajax query does not work after the page content is loaded, so request your help and advice as to home to resolve this issue such that both the ajax query works after every page load.
Ajax Query : 1
<script type="text/javascript">
$(document).ready(function(){
$("input[type='radio']").on('click', function(){
var radioValue = $("input[name='Gender']:checked").val();
var surl = '/fdata/' + radioValue;
var dsurl = encodeURI(surl, "UTF-8");
var hurl = '/Summary';
var dhurl = encodeURI(hurl, "UTF-8");
if (radioValue == "Male" ) { $('#DGender').load('dsurl #DGender'); };
if (radioValue == "Female" ) { $('#DGender').load('dsurl #DGender'); };
if (radioValue == "Summary" ) { $('#DGender').load('dhurl #summary'); };
});
});
</script>
Ajax Query : 2
<script type="text/javascript">
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('input[type=search]').val('');
$('#DGender thead tr').clone(true).appendTo( '#DGender thead' );
$('#DGender thead tr:eq(1) th').each( function (i) {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="'+title+'" />' );
$( 'input', this ).on( 'keyup change', function () {
if ( table.column(i).search() !== this.value ) {
table
.column(i)
.search( this.value )
.draw();
}
} );
} );
var table = $('#DGender').DataTable( {
ordering: false,
orderCellsTop: true,
fixedHeader: true,
filter: false,
searching: true,
info: false,
paging: false,
scrollX: "80vh",
scrollCollapse: false
});
} );
</script>
From,
Vino