Question

我正在使用jQuery来操作项目中的DOM。我有类方法，就像这样：

<!-- language: lang-js -->    
var template = this._Template.split('{0}');
    var content = template[0] + this._Content + template[1];
    if (!this._BlockNode) {
        this._BlockNode = $(content);
        this._ParentNode.append(this._BlockNode);
    }
    else {
        this._BlockNode.replaceWith(content);
    }

第一次调用此方法时一切正常，因为它创建节点并将其附加到父节点。第二个调用（使用replaceWith()方法）也可以正常工作。但是在它之后，属性this._BlockNode[0].parentNode为空。因此，当我第三次调用它而replaceWith()适用于没有_.BlockNode属性的新.parentNode时，由于此检查，它不会替换节点的内容：if ( !isDisconnected( this[0] ) ) { //line 5910 in jQuery 1.8.3。
怎么处理呢？

Answer 1

您需要确保_BlockNode始终指向内容的当前版本。

当您调用replaceWith时，您正确更新了DOM结构，但无法更新对象的内容。最初的_BlockNode最终成为孤儿，所有后续的replaceWith调用都在该节点上运行，而不是在较新的内容上运行。

试试这个：

var template = this._Template.split('{0}');
var $content = $(template[0] + this._Content + template[1]);
if (!this._BlockNode) {
    this._ParentNode.append($content);
} else {
    this._BlockNode.replaceWith($content);
}
this._BlockNode = $content;

可能更适合在_BlockNode而不是jQuery对象中保存本机DOM元素。

在replaceWith jQuery方法之后，父节点为null

1 个答案: