将一个时间事件附加到动态添加的元素

Question

我有一个网页，其中有一个按钮，单击该按钮时，会将文本框添加到DIV。 这是我正在使用的类似代码：

的HTML

<button class="addText">Add Textbox</button>
<div class="textCont">
</div>

的JavaScript

$(document).on("click", ".addText", function() {
    var textarea = $("<textarea/>", {class: "newText"});
    $(".textCont").append(textarea);
});

$(document).one("focus", ".newText", function() {
    alert("Great");
});

小提琴： http : //jsfiddle.net/ErRohitAgg/g3A7T/

我想做的是为添加的每个文本框的第一个焦点显示警报。 但是，焦点事件只执行一次，而不是每个文本框执行一次。

事件根据我需要的功能有什么表现吗？

Answer 1

而是将事件处理程序添加到每个文本区域

$(document).on("click", ".addText", function() {
    $("<textarea/>", {
        'class': 'newText',
        one    : {
            focus: function() {
                alert("Great");
            }
        }    
    }).appendTo(".textCont");
});

小提琴

Answer 2

我宁愿通过首先关注新类来做到这一点：

$(document).on("focus", ".newText", function() {
if(!$(this).hasClass('focused')){
  $(this).addClass('focused')
  alert("Great");
}});

工作演示