How to load a remote modal after an Datatable Ajax call

Question

How would I add an event handler to this code. I want to have a remote bootstrap modal open per each row, the current datatables result does not trigger jquery to open the remote-modal.

//Output

<table id="users" cellspacing="0" border="0"
   class="table table table-condensed sortable table-striped table-bordered datatables dataTable no-footer"
   role="grid" aria-describedby="users_info" style="width: 1129px;">
<thead>
<tr role="row">
    <th class="col-md-3 sorting_asc" tabindex="0" aria-controls="users" rowspan="1" colspan="1"
        style="width: 243px;" aria-sort="ascending" aria-label="User ID: activate to sort column ascending">User ID
    </th>
    <th class="col-md-3 sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" style="width: 250px;"
        aria-label="User Name: activate to sort column ascending">User Name
    </th>
    <th class="col-md-3 sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" style="width: 250px;"
        aria-label="Email: activate to sort column ascending">Email
    </th>
    <th class="col-md-3 sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" style="width: 246px;"
        aria-label="Created At: activate to sort column ascending">Created At
    </th>
    <th class="col-md-3 sorting" tabindex="0" aria-controls="users" rowspan="1" colspan="1" style="width: 79px;"
        aria-label="table.actions: activate to sort column ascending">table.actions
    </th>
</tr>
</thead>

<tbody>

<tr role="row" class="odd">
    <td class="sorting_1">1</td>
    <td>jess</td>
    <td>jess@example.com</td>
    <td>2016-01-24 19:47:26</td>
    <td><a href="#affiliateInfoModal" role="button" class="btn" data-toggle="modal"
           data-load-remote="/get_affiliate_profile/1" data-remote-target="#affiliateInfoModal .modal-body"><i
                    class="fa fa-info fa-lg"></i></a></td>
</tr>
</tbody>

  <!-- Modal -->
<div class="modal fade" id="affiliateInfoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog-affiliate-info">
        <div class="modal-content">

            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

//Datatables script and Modal remote loader

<script type="text/javascript">
        $(document).ready(function() {
            oTable = $('#users').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "/testdata22",
                "columns": [
                    {data: 'id', name: 'id', sorttable: true},
                    {data: 'username', name: 'username' , sorttable: true},
                    {data: 'email', name: 'email' , sorttable: true},
                    {data: 'created_at', name: 'created_at', sorttable: true},
                    {data: 'actions', name: 'actions', searchable: false}
                ]
            });
        });
    </script>




  <script>
        $('[data-toggle="modal-affiliate-info"]').click(function (e) {
            e.preventDefault();
            var url = $(this).attr('href');
            //var modal_id = $(this).attr('data-target');
            $.get(url, function (data) {
                $(data).modal();
            });
        });
    </script>

Answer 1

It depends on which version of DataTables you're using. If you're using the legacy (<1.10) version use fnInitComplete, otherwise (>1.10) use initComplete.

For example (version < 1.10):

$(document).ready(function() {
        oTable = $('#users').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "/testdata22",
            "columns": [
                {data: 'id', name: 'id', sorttable: true},
                {data: 'username', name: 'username' , sorttable: true},
                {data: 'email', name: 'email' , sorttable: true},
                {data: 'created_at', name: 'created_at', sorttable: true},
                {data: 'actions', name: 'actions', searchable: false}
            ],
            "fnDrawCallback": function(oSettings){
                clickable();
            }
        });
    });

function clickable(){
    $('[data-toggle="modal-affiliate-info"]').click(function (e) {
        e.preventDefault();
        var url = $(this).attr('href');
        //var modal_id = $(this).attr('data-target');
        $.get(url, function (data) {
            $(data).modal();
        });
    });
}

I use a very similar setup and it works without a hitch.