JQuery selector for checkbox in dynamic table not works

See more:

jQuery

MVC5

Hi,
I have a html table in my view. like

<table id="dtsResult" width="100%" class="table table-striped table-bordered"></table>

i have a jquery function that return jason result. after this i bind this data to my table. it works fine . but now i want to select all check-box from header checkbox. here is my code:

  function fetchData(whichPage) {
var request = $.ajax({
            //url: "http://ns1.ownership-data.com/new/ODBAppSrv.asmx/SearchResultsJson",
            url: '@Url.Action("SearchResultsJson", "NewResult")',
            method: "POST",
            data: { "page": whichPage }
        });

        request.done(function (data) {
 var items = [];
            $.each(data, function (key, val) {
                var bgClass = (key % 2 == 0) ? "search-result-bg" : "";
                var item = '<tr class="' + bgClass + '">';
               item += '<td><input type="checkbox" id=' + val["RecordID"] + ' value=' + val["RecordID"] + ' name="chkres" class="chkres" /> </td>';
              //  item += '<td></td>';
                item += '<td>' + val["RecordID"] + '</td>';
                item += '<td>' + val["UnitNo"] + '</td>';
                item += '<td>' + val["StreetNo"] + ' ' + val["StreetName"] + ' ' + val["Suburb"] + '</td>';
                item += '<td>' + val["O_SurName"] + '<br/>' + val["O_StreetNo"] + '  ' + val["O_StreetName"] + '  ' + val["O_Suburb"] + '</td>';              
                item += '</tr>';
                items.push(item);
            });

            if (items.length > 0) {
                var result = '<div id="loadingOverlay"></div><tr class="search-result-heading">';               
               result += '<td><input type="checkbox" id="CheckAllRes" class="allres" />Select All</td>';
                result += '<td>Record ID</td>';
                result += '<td>Unit</td>';
                result += '<td>Property Details</td>';
                result += '<td>Owners Details</td>';
                           
                result += '</tr>';
                result += items.join("");
                $("#dtsResult").html(result);
            } );
}

now here is my jquery function but not works properly.

<script type="text/javascript">    
    $(document).ready(function () {
        $(document).ready(function () {
           
        $('.allres').on("click", function () {
            var chk = $(this).is(':checked');
            alert(chk);
            $(".chkres", "#dtsResult").each(function () {
                if (chk) {

                    $(".chkres", "#dtsResult").prop("checked", true);
                }
                else {
                    $(".chkres", "#dtsResult").prop("checked", false);
                }
            });
        }); });
</script>

How i do this.
Thanks.