Если я знаю только класс или идентификатор родительского элемента, как я могу установить прослушиватель размытия для дочерней текстовой области?

Question

Моему расширению Chrome необходимо прослушивать событие размытия для определенного TEXTAREA. Класс и идентификатор текстовой области динамически устанавливаются родительской страницей ... поэтому я не могу использовать их данные для запуска кода моего скрипта содержимого.

Текстовая область находится внутри div, однако, она имеет фиксированный класс, и я могу использовать слушатель событий размытия для этого элемента. Тем не менее, div содержит другие элементы, и если я только слушаю размытие на родительском div, я не могу точно знать, когда пользователь выходит из определенной текстовой области. Как я могу слушать размытие на дочерней текстовой области?

Вот пример кода:

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

Если я установлю событие focusin в классе parentDIV, я смогу получить идентификатор динамически созданного текстового поля ... как здесь:

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

Не возражаете против какого-нибудь ванильного миксина?;-) Попробуйте это:

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

Работает ли?

Answer 2

Как я могу слушать размытие на дочерней текстовой области?

Вы можете отследить изменения дочерней текстовой области, установив обработчик размытия на родительском объекте. Второй аргумент jQuery .on() может быть селектором, который действует как фильтр, так что ваш обработчик будет прослушивать только события, инициируемые дочерними элементами, которые соответствуют фильтру.

Функция обратного вызова получит объект события, и вы можете получить элемент textarea, который вызвал событие, используя свойство .target этого объекта.

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