binding events to ajax fed tables

miked

I use a mix of tables where the data is available when the page loads, and some where the data is loaded via ajax. In the case of the ajax tables I'm seeing problems where I think I need to use some sort of post render event to bind the events to the data, but I'll admit to being momentarily lost on how to go about this. In this case I want to bind a modal dialog to to the data coming in with the view_details class

my header js

    $(document).ready(function() {

        // Setup - add a text input to each footer cell
        $('#example tfoot th').each(function() {
            var title = $('#example thead th').eq($(this).index()).text();
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });

        var table = $('#example').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "/example/getlistdata",
            dom: 'frtiS'
        });

        // Apply the search
        table.columns().eq(0).each(function(colIdx) {
            $('input', table.column(colIdx).footer()).on('keyup change', function() {
                table
                        .column(colIdx)
                        .search(this.value)
                        .draw();
            });
        });

        // bind the popup window to the name column that is identified by the view_profile class assignement for the ajax load
        table.$('.view_detail').click(function() {
            var url = this.href;
            var dialog = $('<div style="display:block" class="loading"></div>').appendTo('body');
            // open the dialog
            dialog.dialog(
                    {
                        // add a close listener to prevent adding multiple divs to the document
                        close: function(event, ui) {
                            // remove div with all data and events
                            dialog.remove();
                        },
                        modal: true,
                        position: [350, 100],
                        minWidth: 675,
                        title: 'Detail'
                    }
            );
            // load the remote content
            dialog.load(
                    url,
                    {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                    function(responseText, textStatus, XMLHttpRequest) {
                        // remove the loading class
                        dialog.removeClass('loading');
                    }
            );
            // prevent the browser following the link
            return false;
        });
    });

and then the html

<table id="example" width="100%" class="display order-column">
    <thead>
        <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
            <th>d</th>
            <th>e</th>
            <th>f</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th><input type="text" class="search_init" value="Search a" name="search_a"></th>
            <th><input type="text" class="search_init" value="Search b" name="search_b"></th>
            <th><input type="text" class="search_init" value="Search c" name="search_c"></th>
            <th><input type="text" class="search_init" value="Search d" name="search_d"></th>
            <th><input type="text" class="search_init" value="Search e" name="search_e"></th>
            <th><input type="text" class="search_init" value="Search f" name="search_f"></th>
        </tr>
    </tfoot>
</table>

and this is the JSON return from /example/getlistdata

{
    "draw": 1,
    "recordsTotal": "5",
    "recordsFiltered": "5",
    "data": [
        [
            "<a href=\"/example/details/1\" class=\"view_detail\">1.2.3.4</a>",
            "unk",
            "na",
            "85",
            "2014-07-30 21:47:00",
            "description"
        ],
        [
            "<a href=\"/example/details/2\" class=\"view_detail\">1.2.3.4</a>",
            "unk",
            "na",
            "85",
            "2014-07-30 21:51:00",
            "description"
        ],
        [
            "<a href=\"/example/details/3\" class=\"view_detail\">1.2.3.4</a>",
            "unk",
            "na",
            "85",
            "2014-07-31 00:16:00",
            "description"
        ],
        [
            "<a href=\"/example/details/4\" class=\"view_detail\">1.2.3.4</a>",
            "unk",
            "na",
            "75",
            "2014-07-31 00:23:00",
            "description"
        ],
        [
            "<a href=\"/example/details/5\" class=\"view_detail\">2.3.4.5</a>",
            "3215",
            "FR",
            "75",
            "2014-07-31 00:24:00",
            "description"
        ]
    ]
}

how do I connect the table.$('.view_detail').click(function()) post table render? Using a js debugger I see that the method never fires

miked

bump?