XF 2.3 Retrigger Element Registers on AJAX load?

[Jaxel]

In previous versions of XF, I had page navigation handled through AJAX. This way I could navigate through pages of comments, without reloading the page, just the comment pane:

        init: function()
        {
            this.$target.on('click', '.pageNavWrapper a', $.proxy(this, 'click'));
        },
        
        click: function(e)
        {
            e.preventDefault();
            
            if ($(e.currentTarget).attr('href'))
            {
                const wrapper = this.$target;
                XF.ajax('get', $(e.currentTarget).attr('href'), {}, function(data)
                {
                    if (data.html)
                    {
                        XF.setupHtmlInsert(data.html, wrapper);
                    }
                });
            }
        },

This worked great. Not only would it load the next page, but it would also re-register any future page navigation links that were loaded in that next page.

However, in XF2.3, I'm having trouble with this. I am able to successfully get it to AJAX load a page. However, it doesn't register any page navigation links in the next page. So after the first page swap, the AJAX no longer functions.

        init: function()
        {
            this.target.querySelectorAll('.pageNavWrapper a').forEach(element =>
            {
                XF.on(element, 'click', this.click.bind(this));
            });
        },
        
        click: function(e)
        {
            e.preventDefault();
            
            if (e.target.href)
            {
                const wrapper = this.target;
                XF.ajax('GET', e.target.href, {}, function(data)
                {
                    if (data.html)
                    {
                        XF.setupHtmlInsert(data.html, (html, container) =>
                        {
                            wrapper.innerHTML = html.innerHTML;
                        })
                    }
                });
            }
        },

How would I register new elements loaded in the new page?

 

[Jaxel]

I was able to get it done by abstracting the functions a bit:

    EWRmedio.CommentsNav = XF.Element.newHandler(
    {
        init: function()
        {
            EWRmedio.CommentsInit();
        },
    });
    
    EWRmedio.CommentsInit = function(e)
    {
        document.querySelectorAll('.medio-comments-nav .pageNavWrapper a').forEach(element =>
        {
            XF.on(element, 'click', EWRmedio.CommentsLoad.bind(this));
        });
    }
    
    EWRmedio.CommentsLoad = function(e)
    {
        e.preventDefault();
        
        if (e.target.href)
        {
            XF.ajax('GET', e.target.href, {}, function(data)
            {
                if (data.html)
                {
                    XF.setupHtmlInsert(data.html, (html, container) =>
                    {
                        document.querySelector('.medio-comments-nav').innerHTML = html.innerHTML;
                        EWRmedio.CommentsInit();
                    })
                }
            });
        }
    }