фокусное событие не работает?

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

focus Чтобы работать на div, он должен иметь tabindex.

Так что ваш пример работать,

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

Answer 2

попробовать

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

FIDDLE

Answer 3

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

Answer 4

@OP - исходный код работает нормально - может быть, вы получаете много предупреждений (нажатие на кнопку «ОК» предупреждает о размытии и повторной фокусировке на div), а затем принимает предложение браузера на t Убрать предупреждения?

Попробуйте другой способ проверки того, что событие обнаружено:

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/

Щелкните и из divs, и вы должны увидеть результат, который вы искали.