如果我只知道父元素的类或ID，如何在子textarea上设置模糊侦听器？

Question

我的Chrome扩展程序需要监听特定TEXTAREA上的模糊事件。 textarea的类和ID由父页面动态设置...因此我无法使用它们的详细信息来触发我的内容脚本代码。

textarea在div内部，但是确实有一个固定的类，我可以在此元素上使用blur事件监听器。 但是，div包含其他元素，如果仅在父div上听模糊处理，我将无法可靠地知道用户何时移出特定文本区域。 如何在子文本区域上听模糊？

这是一些示例代码：

<div class="parentDIV">
    <input id="checkbox_gidix87dxx">
    <textarea id=textarea_90d9x9ddas">
</div>

如果我在parentDIV类上设置了focusin事件，则可以获取动态创建的textarea的ID，如下所示：

var ffTextAreaObj = $('.parentDIV').find('textarea');
console.log('Trying for textarea Obj1: ', ffTextAreaObj);
var ffTextAreaID = ffTextAreaObj[0].id;

在focusin侦听器中，我尝试创建一个动态侦听器...但是它不会触发。

$('#' + ffTextAreaID).blur(function(){
    //Do something
});

任何帮助/方向深表感谢！

Answer 1

如何在子文本区域上听模糊？

您可以通过在父级上设置模糊处理程序来捕获对子级文本区域的更改。 jQuery的.on()的第二个参数可以是充当过滤器的选择器，因此您的处理程序将仅侦听与过滤器匹配的子元素触发的事件。

回调函数将接收一个事件对象，您可以使用该对象的.target属性获取触发该事件的textarea元素。

$(function () {
    $('.parentDIV').on('blur', 'textarea', function(evt) {
        console.log(evt.target);
    });
});

Answer 2

您会反对一些香草味吗？ ;-） 尝试这个：

 $('.parentDIV textarea')[0].addEventListener("blur", function(e){ console.log("Blur has been caught. Blur event: "); console.dir(e); }); 

它行得通吗？