[英]Is it possible to get the HTML of a jQuery created element before it has been inserted into the DOM Tree?
Here's what I've got: 这是我得到的:
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()
});
});
}
If I just try and insert the doneButton object, the jqGrid cell renders [object Object] instead of the actual button. 如果我只是尝试插入doneButton对象,则jqGrid单元格将呈现[object Object]而不是实际按钮。 As such, I can infer that it is expecting raw HTML.
因此,我可以推断出它正在期待原始HTML。 However, doneButton.html() returns an empty string... presumably because I have not appended the doneButton object onto the document yet.
但是,doneButton.html()返回一个空字符串...大概是因为我还没有将doneButton对象附加到文档上。
Is there a trick to doing this with jQuery? 用jQuery做这个有诀窍吗? I'd prefer the cleaner/safer syntax for generating the HTML markup, but I can do this:
我更喜欢更清晰/更安全的语法来生成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
});
});
},
which renders the button as expected. 它按预期呈现按钮。
You get an empty string from your button because html()
returns the inner HTML. 你从按钮得到一个空字符串,因为
html()
返回内部 HTML。
You probably want doneButton.get(0).outerHTML
你可能想要
doneButton.get(0).outerHTML
If I correct understand what you want you can do the same using another way. 如果我正确理解你想要什么,你可以用另一种方式做同样的事情。 To reduce the number of web browser reflows jqGrid build grid body disconnected and then inserts it at one.
为了减少web浏览器重排的数量,jqGrid构建网格体断开然后将其插入一个。 One have to use
gridview: true
to have the performance advantage. 必须使用
gridview: true
才能获得性能优势。 The problem is only that jqGrid build grid body as HTML string and not as DOM . 问题只是jqGrid构建网格体作为HTML字符串而不是DOM 。 jqGrid provide custom formatters, cellattr and rowattr callbacks which allows to construct custom column content or set some custom attributes on rows.
jqGrid提供自定义格式化程序,cellattr和rowattr回调,允许构造自定义列内容或在行上设置一些自定义属性。 See the answer for details.
有关详细信息,请参阅答案
So what you should do is 所以你应该做的是
MarkDone
with the content "<input type='button' value='Done' />"
(without click
) event handler MarkDone
列提供自定义格式化程序,内容为"<input type='button' value='Done' />"
MarkDone
"<input type='button' value='Done' />"
(无click
)事件处理程序 onCellSelect
or beforeSelectRow
callback to catch click
event in any place of grid body inclusive the click on "Done" button. onCellSelect
或beforeSelectRow
回调赶上click
电网身体的任何地方事件包容的“完成”按钮的点击。 The event bubbling (see here ) helps to reduce the number of event handles needed in the grid. $td = $(e.target).closest("td")
will get you the cell which was clicked, iCol = $.jgrid.getCellIndex($td[0])
will get you the column number and this.p.colModel[iCol].name
will get you the name of the clicked column. $td = $(e.target).closest("td")
会得到你点击的单元格, iCol = $.jgrid.getCellIndex($td[0])
会得到列号和this.p.colModel[iCol].name
将为您提供所单击列的名称。 The answer , another one and the oldest one will get you code examples and additional information which you need. 答案 , 另一个和最旧 的答案将为您提供所需的代码示例和其他信息。
Change this: 改变这个:
MarkDone: doneButtonHtml.html()
To: 至:
MarkDone: doneButtonHtml.get(0)
doneButtonHtml is a DOM elements array. doneButtonHtml是一个DOM元素数组。 You need to call get(0) to get the first element in that array.
您需要调用get(0)来获取该数组中的第一个元素。
The first thing to keep in mind is that .HTML() actually retrieves the html inside of an element, not the html of the element itself. 要记住的第一件事是.HTML()实际上检索元素内部的html,而不是元素本身的html。
If you access the Javascript element from the jQuery array of objects you should get the raw html back. 如果从jQuery对象数组中访问Javascript元素,则应该返回原始html。 Check out this fiddle: http://jsfiddle.net/NvKYT/
看看这个小提琴: http : //jsfiddle.net/NvKYT/
var doneButton = $('<input>', {
type: 'button',
value: 'Done',
click: function() {
alert("Done!");
}
});
//doneButton[0] - your html
Try passing doneButton[0] as that is the actual element, not the jQuery wrapped element. 尝试传递doneButton [0],因为它是实际元素,而不是jQuery包装元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.