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

Question

Context – 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();

},

问题——两个独立的元素有独立的事件，试图分离容器元素。当文本输入发生 enter 按键时，它会分离 inputContainer 但这也会导致在 inputContainer 上触发 'focusout' 事件，从而导致

Uncaught Error: NotFoundError: DOM Exception 8 

因为它试图再次分离它。

确保 inputContainer 无错误删除或检查是否可以调用 .detach() 的最佳方法是什么？

Answer 1

您可以使用data()保存状态变量以查看元素是否已分离

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