如何使用外部js文件将addEventLister添加到元素

Question

我想使用自动完成的jQuery UI按行搜索某些产品。 第一行不是问题，因为会自动将addEventListener添加到输入中。

<input id="productAutoList-0" class="productAutoList form-control"/>

但是对于其他行，我使用JS添加了搜索输入，但搜索不起作用。
第一次输入发生了来自addRow函数中添加的jquery-ui.js和jquery-3.2.1.js事件的事件，但是我不知道如何设置js文件的地址。

function addRow() {

row++;
$('.detail').append('<input id="productAutoList-' + row + '" class="productAutoList form-control />');


 $(document).ready(function() {
     var elem = document.getElementById('productAutoList-' + row);
            elem.addEventListener('blur', r, true);
            elem.addEventListener('blur', b, true);
            elem.addEventListener('focus', r, true);
            elem.addEventListener('focus', b, true);
            elem.addEventListener('input', r, true);
            elem.addEventListener('input', b, true);
            elem.addEventListener('keydown', r, true);
            elem.addEventListener('keydown', b, true);
            elem.addEventListener('keypress', r, true);
            elem.addEventListener('keypress', b, true);
            elem.addEventListener('remove', r, true);
            elem.addEventListener('remove', b, true);

        })
    }

这是搜索功能

$(".productAutoList").autocomplete({

source: URL + "Product/Admin/jqueryAjaxSearch",
select: function (event, ui) {


    //if invalid product selected
    if (ui.item.id === "" || ui.item.id === undefined || ui.item.id === false || isNaN(ui.item.id)) {
        $(this).removeClass('is-valid');
        $(this).addClass('is-invalid');
    }
    else {
        $(this).removeClass('is-invalid');
        $(this).addClass('is-valid');

    }

    event.stopPropagation();
},

response: function (event, ui) {
}
});