按钮链接不会使用jquery在数据表中触发事件

Question

I have some JQuery that makes an Ajax call and crete a datatable, this one has a column with button link, this button should trigger an event, but never fire the event, instead makes a postback. This is my code.

Help

$(document).ready(function() {

//Trigger event

$('#datatable_tabletools tbody td a').click('click', function (e) {

            e.preventDefault();
            // show modal dialog
            // Code
        });

//Load info to datatable

$("#btn-search").click(function(e){

            e.preventDefault();
            $.ajax({
                url: '../appointment' ,
                dataType: 'json',
                type: 'get',
                data: {date : $('#date').val()},
                success: function(data){
                    var display_results = $("#table1");
                    display_results.empty();
                    display_results.html("Loading...");
                    var results = '<table id="datatable_tabletools" class="table table-striped table-hover">';
                        results += '<thead> <tr> <th>Time</th> <th>Date</th> <th>Company</th>';
                        results += '<th></th> </tr> </thead> <tbody>';

                    if (data.length != 0)
                    {
                        $.each(data, function() {
                            results += '<tr>';
                            results +='<td>' + this.date + '</td>';
                            results +='<td>' + this.time + '</td>';
                            results +='<td>' + this.company + '</td>';
                            results +='<td>';
                            results +='<a href="" data-bubble="' + this.id + ' class="btn btn-xs btn-primary">More...</a>';
                            results +='</td>'; 
                            results +='</tr>';  
                            });
                        results += '</tbody></table>';
                        display_results.empty();
                        display_results.append(results);

                        datatables();
                    } 

                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        });

        /* TABLE TOOLS */
        function datatables()
        {
            $('#datatable_tabletools').dataTable({
                "sDom" : "<'dt-top-row'Tlf>r<'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-6'i><'col-sm-6 text-right'p>>",
                "aaSorting": [[ 0, "asc" ]],
                "sScrollX": "100%",
                "oTableTools" : {
                    "aButtons" : ["copy", "print", {
                        "sExtends" : "collection",
                        "sButtonText" : 'Save <span class="caret" />',
                        "aButtons" : ["csv", "xls", "pdf"]
                    }],
                    "sSwfPath" : "assets/js/plugin/datatables/media/swf/copy_csv_xls_pdf.swf"
                },
                "fnInitComplete" : function(oSettings, json) {
                    $(this).closest('#dt_table_tools_wrapper').find('.DTTT.btn-group').addClass('table_tools_group').children('a.btn').each(function() {
                        $(this).addClass('btn-sm btn-default');
                    });
                }
            });
        };
    /* END TABLE TOOLS */

})

Answer 1

It seems you are binding the click event in $('#datatable_tabletools tbody td a').click('click', function (e) { even before the element exists..

Option 1: Change your event binding to

$('#table1').on('click', '#datatable_tabletools tbody td a' , function (e) {
        e.preventDefault();
        // show modal dialog
        // Code
    });

Option 2:

I would suggest try moving your event binding code AFTER the datatable is initialized.

So probably I would do it the following way.

function dummyBinding(){
    $('#datatable_tabletools tbody td a').click('click',  function (e) {
        e.preventDefault();
        // show modal dialog
        // Code
    });
}

and call dummyBinding() function at the END of the datatables() function.

---

I would prefer the option 1.