Arrow keys not showing up after ajax call

[gijsdev]

When I load my content through ajax, the previous and next button do not show up in the colorbox. It was working fine when I loaded the content normally.

JS:

$('body').on('click', '.menuItem', function() {
    var alias = $(this).attr('id');
    $.colorbox({
        arrowKey: true,
        rel: 'menu',
        previous: '<i class="fa fa-angle-left" aria-hidden="true"></i>',
        next: '<i class="fa fa-angle-right" aria-hidden="true"></i>',
        closeButton: false,
        fixed: true,
        opacity: 0.25,
        href: function() {
            return '/system/menu_popup.php?alias='+alias;
        },
    });
});

HTML:

<div class="menuItem" id="alias1" rel="menu");">
    <p>Title</p>
</div> 

(Probably going to change this to tags but I want to fix this first)

Fixed it by adding this function and calling it after the ajax content was loaded:

function assignCB() {
    $.colorbox.remove();
    $('.menuItem').colorbox({
        arrowKey: true,
        rel: 'menu',
        previous: '<i class="fa fa-angle-left" aria-hidden="true"></i>',
        next: '<i class="fa fa-angle-right" aria-hidden="true"></i>',
        closeButton: false,
        fixed: true,
        opacity: 0.25,
        href: function() {
            return '/system/menu_popup.php?alias='+$(this).attr('id');
        },
    });
}

(Basically reassigning Colorbox after the content is loaded)