jquery - 如何使用 jquery 在输入文本框上触发模糊/聚焦事件？

Question

我正在使用 1.7.2，我知道这应该可以工作：

// cell is a jquery representation of a <td> element
cell.append($("<input/>", { "type": "text" }).val(content));        
cell.children()[0].focus();
cell.children()[0].on("blur", function() {
    alert("blur");
}

附加输入框，获取焦点，然后 javascript 控制台告诉我：

Uncaught TypeError: Object #<HTMLInputElement> has no method 'on'

如果有人知道我如何捕捉模糊/聚焦事件，我将不胜感激。

Answer 1

您应该绑定委托事件，即。这些输入的实时事件，因为它们稍后附加到 DOM，所以他们需要实时事件处理程序。

$(cell).on('blur focusout', ':text', function() {
   alert(this.value);
});

然后触发如下：

$(':input:first', cell).blur(); // or $(':text', cell).trigger('blur');

$(':input:first', cell).focusout(); // or $(':text', cell).trigger('focusout');.

根据你的代码

cell.children(':input:eq(0)').focus().on("blur", function() {
    alert("blur");
};

或者

cell.children(':input:first').focus().on("blur", function() {
    alert("blur");
};

Answer 2

您正在访问 DOM 元素，[0]并且将其视为 jQuery 对象。

如果只想要第一个，则需要使用eq()jQuery 对象来获取。

cell.children().eq(0).focus().on("blur", function() {
    alert("blur");
};

Answer 3

你正在调用.on一个 DOM 元素，而不是 jQuery 对象，试试这个：

var input = $("<input/>", { "type": "text", val: content } );
cell.append(input);
input.focus();
input.on( "blur", function(){
    alert( "blur" );
});