OverlayTrigger embedded in dataTable


Formerly MtoR

I am trying to use OverlayTrigger inside a dataTable in which I am using an external js called listjs (http://www.listjs.com/) to provide easy sorting capability.

However, it seems that encapsulation of the OverlayTrigger in such construct is stopping Overlay from functioning as I get redirected to the page instead of it getting loaded in the nice overlay popup.

I have attached a code snippet of the template here below, is there anything that would avoid the XenForo initialization to parse the OverlayTrigger ? I thought at an issue of selector, could it something like that ?

I am trying to figure this out since some hours now but can't seem to find what's going wrong... Hope someone might help.

Thank you,

<xen:require js="js/themescorp/third_party/listjs/1.1.1/list.min.js" />
<xen:require js="js/themescorp/third_party/listjs/1.1.1/list.pagination.min.js" />

<script type="text/javascript">
$(document).ready(function() {
    var options = {
        valueNames: [ 'username', 'domainName', 'manage' ],
        page: 2,
        includeDirectionLinks: true,
        plugins: [
    var myList = new List('dataList', options);  

<div id="dataList">  
    <table class="dataTable">
    <tr class="dataRow">
        <th class="username">Username</th>
        <th class="domainName">Domain name</th>
        <th class="manage">Manage</th>
    <tbody class="list">
        <xen:foreach loop="$myDatas" value="$myData">
        <tr class="dataRow">
            <td class="username"><xen:username user="$myData" /></td>    
            <td class="domainName">{$myData.domainName}</th>
            <td class="manage">
                [<a href="{xen:link 'myPage/myAction', $myData}" class="OverlayTrigger"><span>{xen:phrase edit}</span></a>]<br />
                [<a href="{xen:link 'myPage/myAction', $myData}" class="OverlayTrigger"><span>{xen:phrase delete}</span></a>]
    <div class="pageNavLinkGroup">
        <div class="PageNav">
            <ul class="pagination"></ul>