IE中的jQuery focus()和focusout()冲突

问题描述

不确定如何解决此问题.

我正在使用jQuery.focus()和jQuery.focusout()触发Ajax请求并重命名WordPress中的帖子.这段代码在Chrome和Firefox中可以正常运行，但是我无法在IE上运行.

摘要:

$('.editname').on('click', function() {

    var input = $('<input id="editcat" type="text" name="editcat" value="' + name + '" />');
    input.appendTo($(this));
    $("#editcat").focus();
});

$(".editname").focusout(function() {

    $(this).children('input').detach();
    $(this).children('span').show();


});

工作示例: http://jsfiddle.net/moraleida/fE5Tq /3/

似乎在浏览器有时间在附加输入上的focus()之前，在IE中appendTo之后立即调用focusout()事件.

是否有已知的解决方法?

编辑

将focusout更改为blur无效.显然，问题在于调用$("#editcat").focus();会使.editname失去焦点/模糊.如果我注释该行，则输入看起来可以，但是当我单击以专注于该行时，它就会脱离连接.

事实证明，问题出在将focusout附加到父元素而不是input元素上.这样就解决了:

$(".editname").on('focusout', 'input', function() {

    // $(this) now refers to the input element, not .editname
    $(this).siblings('span').show();
    $(this).detach();


    });
});​

最终工作提琴供参考: http://jsfiddle.net/moraleida/fE5Tq/8/

Not sure how to solve this.

I'm using jQuery.focus() and jQuery.focusout() to trigger an Ajax request and rename a post in WordPress. This code works ok in Chrome and Firefox but i can't get it to work on IE.

snippet:

$('.editname').on('click', function() {

    var input = $('<input id="editcat" type="text" name="editcat" value="' + name + '" />');
    input.appendTo($(this));
    $("#editcat").focus();
});

$(".editname").focusout(function() {

    $(this).children('input').detach();
    $(this).children('span').show();


});

working example: http://jsfiddle.net/moraleida/fE5Tq/3/

Seems that focusout() event is called right after the appendTo in IE, before the browser has time to focus() on the appended input.

Is there a known workaround for this?

EDIT

Changing focusout to blur doesn't work. Apparently, the problem is that calling $("#editcat").focus(); makes .editname loose focus/blur. If I comment that line, the input appears ok, but when I click to focus on it, it gets detached.

解决方案

As it turns out, the problem was on attaching focusout to the parent element, instead of the input element. This solved it:

$(".editname").on('focusout', 'input', function() {

    // $(this) now refers to the input element, not .editname
    $(this).siblings('span').show();
    $(this).detach();


    });
});​

Final working fiddle for reference: http://jsfiddle.net/moraleida/fE5Tq/8/

这篇关于IE中的jQuery focus()和focusout()冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！