Question

我有一些JQuery进行Ajax调用并创建一个数据表，这个有一个带按钮链接的列，这个按钮应该触发一个事件，但是从不触发事件，而是进行回发。这是我的代码。

帮助

$(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

即使在元素存在之前，您似乎正在绑定click中的$('#datatable_tabletools tbody td a').click('click', function (e) {事件。

选项1： 将事件绑定更改为

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

选项2：

我建议在数据表初始化之后尝试移动事件绑定代码。

所以我可能会按照以下方式去做。

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

并在dummyBinding()函数的结尾处调用datatables()函数。

我更喜欢选项1。

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

1 个答案: