javascript - 链接未点击，因为在 onblur 后删除

Question

我有一个带有此事件绑定的文本区域：
在焦点上：
显示一个链接，该链接将弹出更大版本的文本区域。
模糊： 删除链接。

但链接上的“点击”事件从未触发，因为它在onblur触发时已被删除。

$("#text-area-new-message").focus(function(){
    $("#text-area-new-message").after('<a id="enlarge-text-area" href="#">enlarge text area</a>');
    $("#enlarge-text-area").click(function(){
        alert('test');
    });
});
$("#text-area-new-message").blur(function(){
    $("#enlarge-text-area").remove();
});

这是jsfiddle

更好的方法是什么？

Answer 1

当用户离开文本框时，您可以延迟删除链接，例如，几秒钟：

$("#enlarge-text-area").delay(3000).remove();

或者更多。如果这是他们的意图，那么用户点击链接的时间似乎是适当的。这可能会变得更加“聪明”，例如，通过缓慢淡出并停止动画并仅在它捕获鼠标时随后删除（通过悬停在链接上）。

Answer 2

一种方法是使用 jquery on function 将事件处理程序附加到所有 'future' '#enlarge-text-area' 元素：

$('#myParentDiv').on('click', '#enlarge-text-area', function(){});

另一种方法是隐藏而不是删除链接。