如何防止.detach尝试在DOM中不存在的.detach元素

Question

上下文- jQuery小部件工厂，呈现元素并将它们存储在私有变量中。

_renderInputHolder: function () {

    var self = this;

    this._inputHolder = $(document.createElement('div'))
        .on('focusout', function (e) {
        self._hideInputHolder.apply(self, [e]);
    });

},

_renderTextInput: function () {

    var self = this;

    this._textInput = $(document.createElement('input'))
        .keypress(function (e) {
        if (e.which === 13) {
            self._hideInputHolder();
        }
    });
},

_hideInputHolder: function () {

    this._inputHolder = this._inputHolder.detach();

},

问题-两个独立的元素都有独立的事件试图分离容器元素。当输入键发生在文本输入上时，它会分离inputContainer，但这也会导致在inputContainer上触发一个“焦点”事件，从而导致

Uncaught Error: NotFoundError: DOM Exception 8 

当它试图再次分离它的时候。

有什么最好的方法来确保没有错误地删除输入容器，或者检查.detach()是否可以被调用？

Answer 1

可以使用数据()保存状态变量，以查看元素是否被分离。

if(!this._inputHolder.data('detached')){
    this._inputHolder = this._inputHolder.data('detached', true).detach();
}

Answer 2

你可以检查是否有元素..。

 _hideInputHolder: function() {
    if ($(this._inputHolder,'body').length) {
         this._inputHolder = this._inputHolder.detach();
    }
}