Question

我想在focusin上显示一个按钮，在点击时执行某些操作或在焦点上隐藏该按钮：

$(".editableDiv").live('focusin', function(){
    // show button under the .editableDiv div

    $("#button").live('click', function(){
        // do action
    });
    $(".editableDiv").live('focusout', function(){
        // hide button
    });
});

它显示焦点上的按钮，但单击该按钮时，将忽略该操作，并立即隐藏按钮，就好像聚焦优先于点击一样。当我尝试删除焦点部分时，操作完成但按钮保持可见...但我需要在焦点上隐藏该按钮。

看起来很简单......但我无法弄清楚为什么它不起作用 - 任何提示都会受到赞赏。

Answer 1

你需要稍微改变你的处理程序分配。现在，按钮单击和焦点处理程序仅绑定在第一个焦点上。

最重要的是存在not being able to know的问题（不使用IE特定信息），什么事件触发了焦点（因此您无法将按钮隔离为源）。最佳解决方案似乎是超时解决方案。我建议使用this answer to your question中提供的代码。

Answer 2

正在发生的事情是焦点在触发点击事件之前触发并隐藏按钮。

那么为什么不在几毫秒后隐藏点击/聚焦上的按钮？

$(".editableDiv").live('focusin', function(){
    // show button under the .editableDiv div
    $("#button").show();
}).live('focusout', function(){
    setTimeout(function(){
        $("#button").hide();
    },50);
});
$("#button").live('click', function(){
    // hide button
    alert('test');
    $("#button").hide();
});

http://jsfiddle.net/userdude/E2Cyx/2/

Answer 3

只是当你点击一个按钮时，你基本上只关注IT，因此，无论焦点是什么，它都会触发焦点/模糊事件。

Answer 4

您需要阻止该按钮单击处理程序上的事件传播，因为如果没有，则按钮获得焦点，并调用focusout函数。

$("#button").live('click', function(event) {
  event.stopPropagation();
  //do your thing...
});

jQuery - 单击focusin上显示的按钮

4 个答案: