Question

$("input").focus(function(){
    console.log('input focused');
});

上面是我测试聚焦事件是否发生的代码。我做了一个动态插入另一个输入的按钮。但是当我关注插入的输入时，根本没有记录控制台。

有人可以帮忙吗？

由于

Answer 1

您需要将event delegation与focusin事件一起使用，因为focus不支持冒泡（事件委派需要冒泡支持才能工作）。

$("input").focus(function() {
  snippet.log('input focus: ' + $('input').index(this));
});

$('#dynamicarea').on('focusin', 'input', function() {
  snippet.log('input focusin: ' + $('input').index(this));
});

$('button').click(function() {
  $('div').append('<input />');
})

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input />
<input />
<input />
<br />
<button>Add</button>
<div id="dynamicarea"></div>

Answer 2

 function focused(evt){
    var target = evt.target;
    var target_name = evt.target.nodeName;
    $(target).keydown(function(e){
        if(e.which==9 && $(e.target).parent().parent().is(":last-of-type")){
            e.preventDefault();
        }else{
            $(this).unbind("keydown");
        }
    });
}
<sectionA>
<input>
/*insert input here*/
</sectionA>
<sectionB>
<input>
<input>
</sectionB>

最初我试图停止聚焦到sectionB中的下一个输入，当按下选项卡时，该输入不在视口中。所以我在上面写了一个函数来绑定插入的输入来告诉。但阿伦的回答也奏效了。非常感谢。

如何在动态插入的输入上进行焦点事件？

2 个答案: