addEventListener after fetched data This is working code, but I want to simplify, correct, and improve the code.

window.addEvent = function(elem,type,callback) {
    var evt = function(e) {
        return callback.call(elem,e);
    };
    var cb = function(e) { return evt(e); };
    elem.addEventListener(type,cb,false);
    return elem;
};
window.findParent = function(child,filter,root) {
    do {
        if( filter(child)) return child;
        if( root &amp;&amp; child == root) return false;
    } while(child = child.parentNode);
    return false;
};
function on(type, target, callback) {
  window.addEvent(document.body, type, function(e) {
    var s = window.findParent(e.srcElement || e.target, function(elm) {
        return elm.classList.contains(target);
    },this);

    if( s &amp;&amp; callback ) {
        callback(e)
    }
  });
}
on("click", "page-link", function(e){
 console.log("hey its working");
});


In this example, I update the pagination with fetch, and I have to bind addEventlistener to every page link. I am thinking about, If its there a cleaner way, using the latest techniques?  (with pure Javascript)
I think you can use querySelectorAll() - for example:

function on (type, target, callback) {
  document.querySelectorAll(target).forEach(function (elem) {
     elem.addEventListener(type, callback);
  })
}


Your function findParent seems similar to element.closest() . In case you need it to work with IE, you can use the code below. It works with a selector, not just a class name.

closest = (element, selector) =&gt; {
    while(element) {
        //For IE11
        if (!element.matches)
            element.matches = element.msMatchesSelector;

        if (element.matches(selector))
            return element;

        element = element.parentElement;
    }
}