Question

我无法弄清楚为什么我的加载功能没有被以下代码段触发。直到jqueries加载一切工作我可以记录数据传递给我的函数

   <script>
    var oTable;
    /* Formating function for row details */
    function fnFormatDetails(nTr)
    {
        var aData = oTable.fnGetData(nTr);
        $(nTr).fadeOut();
        console.log(aData[1]);
        container_id = aData[1];
        var sOut = '<div id="edit_prod_settings_' + aData[1] + '"></div>';

        return sOut;
    }

    $(document).ready(function() {

        oTable = $('#feed_products').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "../admin/?controller=products&action=getTable",
            "aoColumns": [
                {"sClass": "center", "bSortable": false},
                null,
                {sWidth: '20%'},
                null,
                null,
                null,
                null,
                {"sClass": "center", "bSortable": false},
                {"sClass": "center", "bSortable": false, sWidth: '5%'},
                {"sClass": "center", "bSortable": false}
            ],
            "aaSorting": [[1, 'asc']],
            "fnDrawCallback": function(oSettings)
            {
                $('button.edit').on('click', function() {

                    var nTr = $(this).parents('tr')[0];
                    if (oTable.fnIsOpen(nTr))
                    {
                        /* This row is already open - close it */
                        this.src = "<button class='btn btn-warning btn-xs edit'><i class='icon-plus'></i></button>";
                        oTable.fnClose(nTr);
                    }
                    else
                    {
                        /* Open this row */

                        this.src = "<button class='btn btn-warning btn-xs edit'><i class='icon-minus'></i></button>";
                        //oTable.fnOpen(nTr, fnFormatDetails(nTr), 'details');
                        var openedRow = oTable.fnOpen(nTr, fnFormatDetails(nTr), 'details');
                        console.log(openedRow);
                        $(openedRow).each(function() {
                            console.log(container_id);                        
                            $('#edit_prod_settings_'+ container_id).load('../admin/?controller=products&action=getProdDetails&prod_id=' + container_id);
                        });
                    }
                });
            }
        });
    });


</script>

登录

console.log(aData[1]);
        console.log('#edit_prod_settings_'+ aData[1]);
        console.log('../admin/?controller=products&   action=getProdDetails&prod_id=' + aData[1]);

响应

1402879831
#edit_prod_settings_1402879831

最后一个没有返回任何值

Answer 1

引用documentation：

如果选择器没有匹配任何元素 - 在这种情况下，如果文档不包含id =“result”的元素 - 则Ajax请求将不发送。

您的选择器会返回什么？

console.log( '#edit_prod_settings_'+ aData[1] );
console.log( $('#edit_prod_settings_'+ aData[1]) );
console.log( $('#edit_prod_settings_'+ aData[1]).length );

[编辑]

console.log（$（'＃edit_prod_settings _'+ aData [1]）。length）;返回0

这意味着，当您调用$('#edit_prod_settings_'+aData[1])选择器时，页面中没有标识为'edit_prod_settings_'+aData[1]的节点。

修复选择器，或在调用.load()之前创建所需的节点。

或者使用$.ajax( ... )加载内容，并在success回调中明确添加html。

Answer 2

您调用load()的元素不存在。

从您的评论“console.log( $('#edit_prod_settings_'+aData[1]).length );返回0”我认为就是这种情况。

这是因为您在将元素附加到HTML之前调用load()：

您使用oTable.fnOpen作为参数之一

fnFormatDetails(nTr)

在fnFormatDetails中，对于ID为load()的元素，尚未存在的

containerId

然后您返回sOut，这是ID为containerId
在fnFormatDetails返回后，oTable.fnOpen实际执行，将sOut的内容附加到您的HTML中。 从现在开始，标识为#edit_prod_settings_"+aData[1]的元素已存在。（并且在您致电fnClose之前一直存在）

我建议在执行 fnOpen后调用load() 来修复您的问题。当fnOpen返回表元素时，这非常简单：

var openedRow = oTable.fnOpen(nTr, fnFormatDetails(nTr), 'details'); $(openedRow).each(function () { // here goes the function that you want called after fnOpen // in your case, .load() });

Hovewer，您需要稍微重新构建代码，才能从aData[1]之外访问fnFormatDetails值。

数据表中的Jquery load（）

2 个答案: