jquery - 焦点事件不起作用？

Question

我有一个表格单元格，

<td>
    <div style="position:relative">
      <div class="editable" contenteditable="true">
         <br>
      </div>
    </div>
</td>

我在可编辑的 div 上注册焦点事件，

$(".editable").on("focus", function() {
       alert("focus event is called");
   });

但这不起作用。请提前帮助和感谢。

Answer 1

尝试

$(document).on("focus",".editable", function() {
       alert("focus event is called");
   });

小提琴

Answer 2

<div style="position:relative">
    <div contenteditable="true" style="width:100px;height:100px;" class="editable">
    </div>
</div>
apply some css

Answer 3

要focus在 div 上工作，它必须有一个tabindex.

因此，为了使您的示例起作用，

<div class="editable" contenteditable="true" tabindex='1'>

Answer 4

@OP-您的原始代码运行良好-也许您收到了很多警报（单击警报确定按钮模糊并重新聚焦在 div 上），然后接受浏览器关闭警报的建议？

尝试另一种方法来检查是否检测到事件：

HTML：

<div style="position:relative">
  <div class="editable" style="border : 1px solid black" contenteditable="true">
     <br>
  </div>
</div>

            <textarea id="area"></textarea>

JS：

$(".editable").on("focus", function() {
   $("#area").html("focused");
});

$(".editable").on("blur", function() {
   $("#area").html("blurred");
});

在这里试试：http: //jsfiddle.net/cuYBD/

单击进入和退出 div，您应该会看到您正在寻找的结果。