Question

我有一个textarea与这个事件绑定：
焦点：
显示一个链接，弹出较大版本的文本区域 on blur： 删除链接。

但链接上的“点击”事件从未触发，因为当 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将事件处理程序附加到所有“future” '#double-text-area'元素：

$（'＃myParentDiv'）。on（'click'，'＃enlarge-text-area'，function（）{}）;

其他方法是隐藏而不是删除链接。

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

2 个答案: