是否可以在将 jQuery 创建的元素插入 DOM 树之前获取它的 HTML？答案

【问题标题】：Is it possible to get the HTML of a jQuery created element before it has been inserted into the DOM Tree?是否可以在将 jQuery 创建的元素插入 DOM 树之前获取它的 HTML？
【发布时间】：2013-03-27 17:20:29
【问题描述】：

这是我得到的：

gridComplete: function() {
    var doneButton = $('<input>', {
        type: 'button',
        value: 'Done',
        click: function() {
            alert("Done!");
        }
    });

    console.log("HTML:", doneButton.html());

    var ids = $(this).jqGrid('getDataIDs');
    var self = this;
    _.each(ids, function(id) {
        $(self).jqGrid('setRowData', id, {
            MarkDone: doneButton.html()
        });
    });
}

如果我只是尝试插入 doneButton 对象，jqGrid 单元格会呈现 [object Object] 而不是实际的按钮。因此，我可以推断它期待原始 HTML。但是，doneButton.html() 返回一个空字符串...大概是因为我还没有将 doneButton 对象附加到文档上。

用 jQuery 来做这件事有诀窍吗？我更喜欢更简洁/更安全的语法来生成 HTML 标记，但我可以这样做：

gridComplete: function() {
    var doneButtonHtml = "<input type='button' value='Done' onclick=\"alert('Done');\" />";

    var ids = $(this).jqGrid('getDataIDs');
    var self = this;
    _.each(ids, function(id) {
        $(self).jqGrid('setRowData', id, {
            MarkDone: doneButtonHtml
        });
    });
},

按预期呈现按钮。

【问题讨论】：

标签： javascript jquery html jqgrid

【解决方案1】：

您从按钮中得到一个空字符串，因为html() 返回了inner HTML。

你可能想要doneButton.get(0).outerHTML

【讨论】：

这行得通。谢谢！我尝试在 jQuery 元素本身上调用 outerHTML，但被告知它没有该方法——所以我走错了路。哎呀。

【解决方案2】：

如果我正确理解你想要什么，你可以用另一种方式做同样的事情。为了减少web browser reflowsjqGrid 的数量，建立网格体断开连接，然后将其插入一个。必须使用gridview: true 才能获得性能优势。问题只是 jqGrid 构建网格体 作为 HTML 字符串而不是作为 DOM。 jqGrid 提供自定义格式化程序、cellattr 和 rowattr 回调，允许构造自定义列内容或在行上设置一些自定义属性。详情请见the answer。

所以你应该做的是

为列MarkDone 提供自定义格式化程序，内容为"<input type='button' value='Done' />"（不带click）事件处理程序
使用onCellSelect 或beforeSelectRow 回调在网格体的任何位置捕获click 事件，包括单击“完成”按钮。 The event bubbling（参见here）有助于减少网格中所需的事件句柄数量。 $td = $(e.target).closest("td") 将获得被点击的单元格，iCol = $.jgrid.getCellIndex($td[0]) 将获得列号，this.p.colModel[iCol].name 将获得被点击列的名称。

The answer、another one 和 the oldest one 将为您提供所需的代码示例和其他信息。

【讨论】：

【解决方案3】：

改变这个：

MarkDone: doneButtonHtml.html()

收件人：

MarkDone: doneButtonHtml.get(0)

doneButtonHtml 是一个 DOM 元素数组。您需要调用 get(0) 来获取该数组中的第一个元素。

【讨论】：

【解决方案4】：

首先要记住的是 .HTML() 实际上检索元素内部的 html，而不是元素本身的 html。

如果您从 jQuery 对象数组访问 Javascript 元素，您应该获取原始 html。看看这个小提琴：http://jsfiddle.net/NvKYT/

var doneButton = $('<input>', {
    type: 'button',
    value: 'Done',
    click: function() {
        alert("Done!");
    }
});

//doneButton[0] - your html

尝试传递 doneButton[0]，因为那是实际元素，而不是 jQuery 包装的元素。

【讨论】：