Add Event Listener to elements inside jsrender

Question

I have an HTML template inside a text/x-jsrender (this is just a part of it):

<script type="text/x-jsrender" id="js-true-up-location-items-list-template">
    <input name="actualSalesCount"
       id="actual-sales-count-input-{{:id}}"
       class="numeric-input"
       type="text"
       value="{{:actualSalesCount}}"
       data-id="{{:id}}">
</script>

I want to attach an event listener to all of the input text that have the numeric-input class.

I added the following code:

<script type="text/javascript">
window.onload = function () {
  console.log("Page has been loaded");
  $(document).ready(function () {
        console.log('enabling arrow navigation from the page!');
        $('.numeric-input').keyup(function (e) {
            console.log('keyup!');
            if (e.which == 39) { // right arrow
                $(this).closest('td').next().find('input').focus();
            } else if (e.which == 37) { // left arrow
                $(this).closest('td').prev().find('input').focus();
            } else if (e.which == 40) { // down arrow
                $(this).closest('tr').next().find('td:eq(' + 
    $(this).closest('td').index() + ')').find('input').focus();
            } else if (e.which == 38) { // up arrow
                $(this).closest('tr').prev().find('td:eq(' + 
    $(this).closest('td').index() + ')').find('input').focus();
            }
        });
 });
};
</script>

So, the "Page has been loaded" log is displayed, also the "enabling arrow navigation from the page!", but when I press keys inside the input, nothing happens.

Any idea?

Thanks!