jQuery is not working after loading the DOM

I have three tables in my HTML. I need to align-text the first column to the left and other columns to the right. So I used the following code.

CSS:

table th, table td{
        text-align: right;
    }

jQuery:

$(window).on("load", function() {
        var x = $("table").length;
        for (i = 0; i < x; i++) {
            $("table:eq("+ i +") thead tr th:first").css("text-align", "left");
            var y = $("table:eq(" + i + ") tbody tr").length;
            for (p = 0; p < y; p++) {
                $("table:eq("+ i +") tbody tr:eq("+ p +") td:first").css("text-align", "left");
            }
        }
    });

This is working perfectly. But in my 3rd table (.locate-table) I have a search box (#filter_by). When I put a string, it will take the particular records into the table from back end by an ajax call. After doing a search, new tds are not aligned to the left.

I tried the following. But it is only working when I typing a text in text box. After getting the result, align-left will be gone.

$("#filter_by").on("keyup", function() {
        var y = $(".locate-table tbody tr").length;
        for (p = 0; p < y; p++) {
            $(".locate-table tbody tr:eq("+ p +") td:first").on("load", function() {
                $(".locate-table tbody tr:eq("+ p +") td:first").addClass("text-left");
            });
        }
    });

How can I keep text-align: left even after doing a search?