Datatable内的Jquery load（）

我不明白为什么我的加载函数没有被下面的代码片段触发。在jQuery加载所有东西之前，我可以记录传递给函数的数据

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

回应

1402879831
#edit_prod_settings_1402879831

---

最后一个不返回任何值

您调用的

load（）

所在的元素不存在

从您的注释“

console.log（$（'edit\u prod\u settings.+aData[1]）.length）；

返回0”我认为情况就是这样

这是因为在将元素附加到HTML之前调用了

load（）

：

• 使用

  fnFormatDetails（nTr）

  作为参数之一调用

  oTable.fnOpen

• 在

  fnFormatDetails

  中，对id为

  containerId

  ，的元素返回call

  load（）

  ，该元素尚不存在
• 然后返回

  sOut

  ，这是id为

  containerId

• 返回

  fnFormatDetails

  后，

  oTable.fnOpen

  实际执行，将

  sOut

  的内容附加到HTML中从现在起，id为

  #edit_prod_settings.+aData[1]

  的元素将存在。（并且将一直存在，直到您调用

  fnClose

  ）

我建议在执行fnOpen后调用

load（）

来解决您的问题。由于

fnOpen

返回table元素，这非常简单：

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，您需要稍微重新构造代码，以便从

fnFormatDetails

外部访问

aData[1]

值

如果选择器没有匹配任何元素（在本例中，如果文档不包含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]）

选择器时，页面中没有id为

'edit_prod_settings.'+aData[1]

的节点

在调用

.load（）

之前，请修复选择器或创建所需的节点

---

或者使用

$.ajax（…）

加载内容，并在

success

回调中显式添加html。

单击“.edit”时是否未触发单击事件？单击无效，console.log（aData[1]）；当您指的是加载函数时返回dataso，哪个函数不会被触发？您可以指定函数名吗？感谢您的反馈fnFormatDetails（nTr）查看控制台后面的注释。Log您可以在“$（文档）中显式调用函数吗？准备好了吗“。您可以在最后指定它。这已使用firebug xhr调试。加载函数未获取firedWhat做

”#编辑产品设置+aData[1]

计算到？页面上有这个元素吗？让我在jsfiddle上做一个例子，谢谢您的反馈，您说过“#edit_prod_settings”+aData[1]返回null。div I在流上创建的问题是var sOut=''；如何以propper的方式制作此div？请在问题中包括用于将此div放在页面上的代码（可能是

oTable.fnOpen

）。以下是我在登录时得到的信息，我一直在扩展我的comment@fefe：以及

console.log（$（'#edit_prod_settings.'+aData[1]）.length）的作用打印控制台.log（$（'#编辑产品设置'+aData[1]）长度）；返回0
console.log( '#edit_prod_settings_'+ aData[1] );
console.log( $('#edit_prod_settings_'+ aData[1]) );
console.log( $('#edit_prod_settings_'+ aData[1]).length );