jQuery .wrap() 无需重新聚焦答案

【问题标题】：jQuery .wrap() without needed refocusingjQuery .wrap() 无需重新聚焦
【发布时间】：2014-03-24 04:12:42
【问题描述】：

我需要用 div 包装输入，但在 .wrap() 输入模糊之后。如何修复？

<input type="text">

<script>
    $("input").on("keypress", function(){
        $(this).wrap("<div></div>");
    })
</script>

【问题讨论】：

【解决方案1】：

首先，解释一下发生了什么：

当您调用wrap 时，jQuery 正在从 DOM 中删除输入。它创建一个 DIV 元素，附加输入，然后重新附加到 DOM。由于输入已从 DOM 中移除，因此您失去了焦点。

解决此问题的最简单方法是在wrap 之后调用focus。追加DIV元素后，jQuery会触发对input元素的关注。

但是，这有 user13500 在 cmets 中提到的问题。也就是说，输入元素始终包含在 DIV 中。你最终会得到一个 DOM 结构，例如：

<div>
    <div>
        <div>
            <div>
                <input></input>
            </div>
        </div>
    </div>
</div>

如果你输入“cool”...所以不是每个都有效率:)

请问将输入包装在 DIV 中的目的是什么？您可以通过条件检查限制wrap，例如：

if($(this).data('is-wrapped') === undefined) {
    $(this).wrap('<div></div>').data('is-wrapped', true).focus();
}

如果你有它的要求......这是一个小提琴！ http://jsfiddle.net/2PgR8/1/

【讨论】：