焦点事件委托的Jquery

Question

由于一些奇怪的原因，这个简单的功能似乎不起作用：

$("body").on("focus", this, function(){
    alert('d');
})

this是输入或textarea元素。

如果我这样做：

$(this).on("focus", function(){
    alert('d');
})

它会对目前存在的那些元素起作用，但是事件不会触发新创建的元素，我做错了什么？

Answer 1

如API所述，第二个参数是“一个选择器字符串，用于过滤触发事件的所选元素的后代。”

我认为this在您的情况下是一个DOM元素。尝试将其更改为选择器以匹配输入或textareas。每当focus事件从与您的选择器匹配的元素冒泡到body时，这将导致调用您的函数。这应该适合你：

$("body").on("focus", "input, textarea", function() {
    alert('d');
});

有关此处on()的更多信息：http://api.jquery.com/on/

Answer 2

由于@ grantman16提到第二个参数必须是选择器，

但如果它是新创建的元素，为什么不使用focus()。

​va​r input = $("<input>");
input.focus(function() {
  alert('d');
});
$("body").append(input);​
​

Example -1

您不需要使用.on，但如果您坚持使用它，则应将选择器设置为第二个参数，

var input = $("<input>").addClass("lastInput");
$("body").on("focus", "input.lastInput", function() {
  alert('d');
});
$("body").append(input);
​

Example -2

Answer 3

你想要这样的东西：

$(document).ready(function() {
    $("body").on("focus", 'textarea, input', function(){
       console.log('d');
    })​
});