为什么换行会导致我的输入失去模糊？

Question

我正在使用带有以下 sn-p 的 jQuery 2.0.3：

function fixTextbox(element) {
  var span = "<span class='k-widget k-autocomplete k-header k-state-default'></span>";
  var wrap = $(element).wrap(span);
}

$(document).on("focus", ".k-textbox", function() {
  console.debug("focus");
  fixTextbox(this);
  $(this).parent().addClass("k-state-focused");
});

$(document).on("blur", ".k-textbox", function() {
  console.debug("blur");
  $(this).parent().removeClass("k-state-focused");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="text" class="k-textbox" />

这里的问题是，当我执行.wrap 时，它会取消绑定模糊事件。

是否有其他方法可以将输入封装在不会丢失事件的跨度中？还是应该在包装后手动重新附加事件？

Answer 1

我认为问题在于，当您使用另一个元素包装输入元素时，它会强制渲染树的某种浏览器重排，从而导致输入元素失去焦点。

演示：Fiddle - 在 chrome 中查看 - 在控制台中，您可以看到正在记录焦点和模糊

一个可能的解决方案是在焦点事件之前环绕跨度 - 在文档准备好或者如果元素是动态创建的，那么在元素创建本身期间。

jQuery(function ($) {
    $('.k-textbox').wrap('<span class="k-widget k-autocomplete k-header k-state-default"></span>')
})

演示：Fiddle