jQuery DataTable Detail 不执行 onclick href

Posted 2023-05-09

【中文标题】jQuery DataTable Detail 不执行 onclick href

【英文标题】：jQuery DataTable Detail does not execute onclick href

【发布时间】：2018-05-07 18:09:34

【问题描述】：

我有一个 jQuery DataTable，当打开详细信息example 时，它会显示一些信息以及一个链接（href），该链接调用了控制器的一个函数，但点击不会发生。

在创建我的数据表时，我在论坛中用作搜索，$ compile，以识别控制器的功能，问题是它甚至没有调用此函数。 我已经尝试通过“alert（'test'）”更改函数调用并且也没有执行

'<a ng-click="gerarDacte(' + d.documentoCodigo + ');" class="btn btn-icon btn-sm btn-twitter mr5"><i class="fa fa-twitter"></i> Gerar</a> ' +

观察上面的这一行

function table(dados) 
    $scope.listaDadosGrid = dados;
    console.log(dados);

    function format(d) 
        // `d` is the original data object for the row
        var html =


            '<div class="demo-button3"> '+
            '<a ng-click="gerarDacte(' + d.documentoCodigo + ');" class="btn btn-icon btn-sm btn-twitter mr5"><i class="fa fa-twitter"></i> Gerar</a> ' +
            '<br>' +
            '</div> ';


        return html;
    ;

    var selecionados = [];

    $(document).ready(function (data) 

        var table = $('#tableDocumentos').DataTable(

            aaData: dados,

            language: 
                url: "//cdn.datatables.net/plug-ins/1.10.15/i18n/Portuguese-Brasil.json",
                decimal: ",",
                thousands: "."
            ,
            deferRender: true,
            bAutoWidth: false,
            bProcessing: true,
            bDeferRender: true,

            createdRow: function (row, data, dataIndex) 
                $compile(angular.element(row).contents())($scope);
            ,
            columnDefs: [
                targets: 0,
                searchable: false,
                orderable: false,
                checkboxes: 
                    selectRow: true
                ,
            ],
            select: 
                style: 'multi'
            ,


            sAjaxDataProp: "",
            bDestroy: true,
            order: [[2, "asc"]],
       );

        $('#tableDocumentos tbody').on('click', 'td.details-control', function () 
            var tr = $(this).closest('tr');
            var row = table.row(tr);

            if (row.child.isShown()) 
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            
            else 
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
            

        );

函数 gerarDacte

$scope.gerarDacte = function (idDocumentoLogistico) 
    //go to...

我在jsfiddle创建了一个例子

谢谢

【问题讨论】：

请点击<>并创建minimal reproducible example

您几乎可以肯定需要将该回调包装在 $scope.$applyAsync

我很抱歉格式错误。 Aluan Haddad，我会在这种情况下使用一些示例，因为我不知道如何在调用函数时使用$scope.$ApplyAsync。我不知道是否是时候使用它。谢谢

你需要$compile的内容，有数百个类似的问题。

【参考方案1】：

正如上面的小评论中提到的，您应该使用$compile 将子行绑定到$scope：

 else 
  // Open this row
  row.child(format(row.data()), 'no-padding').show();
  tr.addClass('shown');

  $compile(row.child()[0])($scope); //<-- HERE

  $('div.slider', row.child()).slideDown();

您还需要将您的函数实际绑定到$scope：

$scope.gerarDacte = function(id)
   alert(id);

现在它可以工作了，更新了小提琴 -> http://jsfiddle.net/ADukg/16222/

但是为什么要将子行绑定到$scope 我无法理解，似乎有点矫枉过正。您可以将 javascript / jQuery 事件侦听器绑定到按钮（或其他）并从该侦听器中访问 $scope，您不需要一直通过 angular。如果你有两种方式绑定到表单元素或使用更高级的指令，那没关系，但简单的点击是不值得的。

【讨论】：

感谢大卫康拉德的帮助，工作完美。我开始使用 angularjs 和 jquery，我不知道哪些仍然是最佳实践，我看到了一些我尝试做的相同 jquery 的示例。