在动态文本区域上附加焦点事件答案

【问题标题】：Attach focus event on dynamic textarea在动态文本区域上附加焦点事件
【发布时间】：2014-02-11 09:28:58
【问题描述】：

我想在动态创建的textarea 元素上附加一个焦点事件。我在下面创建了一个小提琴来描述我的问题。当我单击“单击”链接时，会创建另一个文本区域。它没有获得焦点事件。

$("textarea").on("focus", function(){
    alert("textarea focus");
    $(this).blur();
});

$("a").click(function(){
    $("div").append("<textarea>2</textarea>");
});

http://jsfiddle.net/LepvD/2/

如何在动态文本区域上添加焦点事件？我想避免再次为每个新元素一次又一次地附加焦点

【问题讨论】：

@reyaner，这就是解决方案，我敢肯定没有人复制它们
3 次相同的警报......真是巧合......没关系。
@reyaner - 你看过 jsfiddle 了吗？警报包含在那里。他们可能复制了该代码并进行了相应的更改。
啊，不，我没有……现在有意义，他们从那里复制了它。

标签： jquery html events focus textarea

【解决方案1】：

您需要在此处使用event delegation，因为您的textarea 是动态创建的：

$(document).on("focus","textarea", function(){
    alert("textarea focus");
    $(this).blur();
});

它将帮助您在这些新添加的textarea 上绑定focus 事件

Updated Fiddle

【讨论】：

它是否适用于即使在 iframe 中动态创建的元素？

【解决方案2】：

你应该使用事件委托。使用：

 $(document).on("focus","textarea", function(){
    alert("textarea focus");
    $(this).blur();
});

Working Fiddle

【讨论】：

【解决方案3】：

使用委托事件，因为它们的优势是可以处理来自后代元素的事件，这些事件会在以后添加到文档中。

当您动态创建文本区域时。

您需要使用Event Delegation。您必须使用委托事件方法使用.on()。

$("div").on("focus", "textarea", function(){
    alert("textarea focus");
    $(this).blur();
});

Live Demo

【讨论】：