在將jQuery創建的元素插入DOM樹之前，是否可以獲取它的HTML？

Question

這是我得到的：

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
        });
    });
},

它按預期呈現按鈕。

Answer 1

你從按鈕得到一個空字符串，因為html()返回內部 HTML。

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

Answer 2

如果我正確理解你想要什么，你可以用另一種方式做同樣的事情。 為了減少web瀏覽器重排的數量，jqGrid構建網格體斷開然后將其插入一個。 必須使用gridview: true才能獲得性能優勢。 問題只是jqGrid構建網格體作為HTML字符串而不是DOM 。 jqGrid提供自定義格式化程序，cellattr和rowattr回調，允許構造自定義列內容或在行上設置一些自定義屬性。 有關詳細信息，請參閱答案

所以你應該做的是

1. 為MarkDone列提供自定義格式化程序，內容為"<input type='button' value='Done' />" MarkDone "<input type='button' value='Done' />" （無click ）事件處理程序
2. 使用onCellSelect或beforeSelectRow回調趕上click電網身體的任何地方事件包容的“完成”按鈕的點擊。 冒泡 （參見此處 ）有助於減少網格中所需的事件句柄數。 $td = $(e.target).closest("td")會得到你點擊的單元格， iCol = $.jgrid.getCellIndex($td[0])會得到列號和this.p.colModel[iCol].name將為您提供所單擊列的名稱。

答案 ， 另一個和最舊 的答案將為您提供所需的代碼示例和其他信息。

Answer 3

改變這個：

MarkDone: doneButtonHtml.html()

至：

MarkDone: doneButtonHtml.get(0)

doneButtonHtml是一個DOM元素數組。 您需要調用get（0）來獲取該數組中的第一個元素。

Answer 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包裝元素。