使用jQuery如何触发input文本框的失去焦点(blur)/获得焦点(focusout)事件？

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'

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

- rich

Answer 1

你应该绑定委托事件，例如 live 事件，到那些输入框上，因为它们稍后才被添加到 DOM 中，所以需要一个 live 事件处理程序。

$(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");
};

- thecodeparadox

Answer 2

您正在访问带有[0]的DOM元素，并像它是jQuery对象一样操作。

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

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

- epascarello

Answer 3

你正在调用 DOM 元素上的 .on，而不是 jQuery 对象，请尝试这样做：

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

- Esailija