XF 2.2 [SOLVED] Can not load template via ajax

[D.C Style]

So here's the thing. I followed this instruction by @robdog

https://xenforo.com/community/threads/load-template-by-ajax.134959/post-1437335

Here's my code, for example

XF.FirstEventHandlerName = XF.Click.newHandler({
        eventNameSpace: 'XFFirstEventHandlerName',

        init: function() { },

        click: function(e) {
            var el = this.$target,
                config = {
                    method: 'GET',
                    action: el.data('href'),
                    successCallback: XF.proxy(this, 'processResponse'),
                    ajaxOptions: { skipDefault: true }
                };

            XF.ajax(
                config.method,
                config.action,
                {},
                config.successCallback,
                config.ajaxOptions
            );
        },

        processResponse: function(data) {
            XF.setupHtmlInsert(data.html, function($html) {
                $('.output-container').html($html);
            });
        }
    });

    XF.Click.register('xf-first-event-handler-name', 'XF.FirstEventHandlerName');

It works. Then, I added another function to handle the button which is loaded via ajax template (mentioned above)

XF.SecondEventHandlerName = XF.Click.newHandler({
        eventNameSpace: 'XFSecondEventHandlerName',

        init: function() { },

        click: function(e) {
            var el = this.$target,
                config = {
                    method: 'GET',
                    action: el.data('href'),
                    successCallback: XF.proxy(this, 'processResponse'),
                    ajaxOptions: { skipDefault: true }
                };

            XF.ajax(
                config.method,
                config.action,
                {},
                config.successCallback,
                config.ajaxOptions
            );
        },

        processResponse: function(data) {
            XF.setupHtmlInsert(data.html, function($html) {
                $('.output-container').html($html);
            });
        }
    });

    XF.Click.register('xf-second-event-handler-name', 'XF.SecondEventHandlerName');

Basically, when I click on the first button, the .output-container is loaded with new content via ajax (and all its js work well). The content included the second button.
But when I click on the second button, all the js in the second template don't work.

Does anyone have an idea?

 

[D.C Style]

Solved! I have to empty the container element .output-container before load new content!

$('.output-container').empty(); // Run before ajax load new content!