jquery - Jquery关于焦点事件委托

Question

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

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

this是输入或文本区域元素。

如果我这样做：

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

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

Answer 1

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

我假设this，在你的情况下，是一个 DOM 元素。尝试将其更改为选择器以匹配输入或文本区域。这将导致每当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);​
​

示例-1

你不需要使用.on，但如果你坚持使用它，你应该设置一个选择器作为第二个参数，

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

示例-2

Answer 3

你想要这样的东西：

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