Question

我正在使用带有以下代码段的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

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

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

一种可能的解决方案是在焦点事件之前包装范围 - 在文档就绪时或者在元素创建过程中动态创建元素。

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

演示：Fiddle

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

1 个答案: