Mixing
If I only know a class or ID of a parent element, how can I set a blur listener on a child textarea?
My Chrome Extension needs to listen for a blur event on a specific TEXTAREA. The textarea's class and ID are set dynamically by the parent page...so I can't use their details to trigger my content script code.
The textarea is inside a div, however, that does have a fixed class and I can use the blur event listener on this element. However, the div contains other elements and if I only listen to blur on the parent div I can't reliably know when the user moves out of the specific textarea. How can I listen for blur on the child textarea?
Here's some sample code:
<div class="parentDIV">
<input id="checkbox_gidix87dxx">
<textarea id=textarea_90d9x9ddas">
</div>
If I set a focusin event on the parentDIV class I can get the ID of the dynamically created textarea...like this:
var ffTextAreaObj = $('.parentDIV').find('textarea');
console.log('Trying for textarea Obj1: ', ffTextAreaObj);
var ffTextAreaID = ffTextAreaObj[0].id;
In the focusin listener I tried creating a dynamic listener...but it doesn't fire.
$('#' + ffTextAreaID).blur(function(){
//Do something
});
Any help/direction deeply appreciated!
javascript jquery
google-chrome-extension asked Nov 19 '18 at 23:44
11teenth11teenth
299114
add a comment |
My Chrome Extension needs to listen for a blur event on a specific TEXTAREA. The textarea's class and ID are set dynamically by the parent page...so I can't use their details to trigger my content script code.
The textarea is inside a div, however, that does have a fixed class and I can use the blur event listener on this element. However, the div contains other elements and if I only listen to blur on the parent div I can't reliably know when the user moves out of the specific textarea. How can I listen for blur on the child textarea?
Here's some sample code:
<div class="parentDIV">
<input id="checkbox_gidix87dxx">
<textarea id=textarea_90d9x9ddas">
</div>
If I set a focusin event on the parentDIV class I can get the ID of the dynamically created textarea...like this:
var ffTextAreaObj = $('.parentDIV').find('textarea');
console.log('Trying for textarea Obj1: ', ffTextAreaObj);
var ffTextAreaID = ffTextAreaObj[0].id;
In the focusin listener I tried creating a dynamic listener...but it doesn't fire.
$('#' + ffTextAreaID).blur(function(){
//Do something
});
Any help/direction deeply appreciated!
javascript jquery
google-chrome-extension asked Nov 19 '18 at 23:44
11teenth11teenth
299114
add a comment |
My Chrome Extension needs to listen for a blur event on a specific TEXTAREA. The textarea's class and ID are set dynamically by the parent page...so I can't use their details to trigger my content script code.
The textarea is inside a div, however, that does have a fixed class and I can use the blur event listener on this element. However, the div contains other elements and if I only listen to blur on the parent div I can't reliably know when the user moves out of the specific textarea. How can I listen for blur on the child textarea?
Here's some sample code:
<div class="parentDIV">
<input id="checkbox_gidix87dxx">
<textarea id=textarea_90d9x9ddas">
</div>
If I set a focusin event on the parentDIV class I can get the ID of the dynamically created textarea...like this:
var ffTextAreaObj = $('.parentDIV').find('textarea');
console.log('Trying for textarea Obj1: ', ffTextAreaObj);
var ffTextAreaID = ffTextAreaObj[0].id;
In the focusin listener I tried creating a dynamic listener...but it doesn't fire.
$('#' + ffTextAreaID).blur(function(){
//Do something
});
Any help/direction deeply appreciated!
javascript jquery
google-chrome-extension asked Nov 19 '18 at 23:44
11teenth11teenth
299114
My Chrome Extension needs to listen for a blur event on a specific TEXTAREA. The textarea's class and ID are set dynamically by the parent page...so I can't use their details to trigger my content script code.
The textarea is inside a div, however, that does have a fixed class and I can use the blur event listener on this element. However, the div contains other elements and if I only listen to blur on the parent div I can't reliably know when the user moves out of the specific textarea. How can I listen for blur on the child textarea?
Here's some sample code:
<div class="parentDIV">
<input id="checkbox_gidix87dxx">
<textarea id=textarea_90d9x9ddas">
</div>
If I set a focusin event on the parentDIV class I can get the ID of the dynamically created textarea...like this:
var ffTextAreaObj = $('.parentDIV').find('textarea');
console.log('Trying for textarea Obj1: ', ffTextAreaObj);
var ffTextAreaID = ffTextAreaObj[0].id;
In the focusin listener I tried creating a dynamic listener...but it doesn't fire.
$('#' + ffTextAreaID).blur(function(){
//Do something
});
Any help/direction deeply appreciated!
javascript jquery
google-chrome-extension javascript jquery
google-chrome-extension asked Nov 19 '18 at 23:44
11teenth11teenth
299114
asked Nov 19 '18 at 23:44
11teenth11teenth
299114
asked Nov 19 '18 at 23:44
11teenth11teenth
299114
asked Nov 19 '18 at 23:44
11teenth11teenth
299114
asked Nov 19 '18 at 23:44
11teenth11teenth
299114
299114
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
How can I listen for blur on the child textarea?
You can catch changes to the child textarea by setting the blur handler on the parent. The second argument to jQuery's .on() can be a selector that acts as a filter, so that your handler will only listen to events fired by child elements that match the filter.
The callback function will receive an event object, and you can get the textarea element that fired the event using that object's .target property.
$(function () {
$('.parentDIV').on('blur', 'textarea', function(evt) {
console.log(evt.target);
});
});
answered Nov 20 '18 at 0:18
Kevin CollinsKevin Collins
1,2961912
Ah! Okay...I'm actually already using this approach because my listener is at the document level. I tried to simplify my original example...my actual listener (in content script) is: $(document).on( 'blur', '.parentDIV', function( e ) { // DO STUFF }); Can you add the textarea selector to that statement to limit the blur listener?
– 11teenth
Nov 20 '18 at 0:32
I would try $(document).on( 'blur', '.parentDIV textarea', function( e ) { // DO STUFF });
– Kevin Collins
Nov 20 '18 at 0:36
Many thanks! That did it...
– 11teenth
Nov 20 '18 at 2:21
add a comment |
Would you mind against some vanilla mixin? ;-)
Try this:
$('.parentDIV textarea')[0].addEventListener("blur", function(e){
console.log("Blur has been caught. Blur event: ");
console.dir(e);
});Does it work?
answered Nov 20 '18 at 0:19
Max KurtzMax Kurtz
987
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384247%2fif-i-only-know-a-class-or-id-of-a-parent-element-how-can-i-set-a-blur-listener%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
How can I listen for blur on the child textarea?
You can catch changes to the child textarea by setting the blur handler on the parent. The second argument to jQuery's .on() can be a selector that acts as a filter, so that your handler will only listen to events fired by child elements that match the filter.
The callback function will receive an event object, and you can get the textarea element that fired the event using that object's .target property.
$(function () {
$('.parentDIV').on('blur', 'textarea', function(evt) {
console.log(evt.target);
});
});
answered Nov 20 '18 at 0:18
Kevin CollinsKevin Collins
1,2961912
Ah! Okay...I'm actually already using this approach because my listener is at the document level. I tried to simplify my original example...my actual listener (in content script) is: $(document).on( 'blur', '.parentDIV', function( e ) { // DO STUFF }); Can you add the textarea selector to that statement to limit the blur listener?
– 11teenth
Nov 20 '18 at 0:32
I would try $(document).on( 'blur', '.parentDIV textarea', function( e ) { // DO STUFF });
– Kevin Collins
Nov 20 '18 at 0:36
Many thanks! That did it...
– 11teenth
Nov 20 '18 at 2:21
add a comment |
How can I listen for blur on the child textarea?
You can catch changes to the child textarea by setting the blur handler on the parent. The second argument to jQuery's .on() can be a selector that acts as a filter, so that your handler will only listen to events fired by child elements that match the filter.
The callback function will receive an event object, and you can get the textarea element that fired the event using that object's .target property.
$(function () {
$('.parentDIV').on('blur', 'textarea', function(evt) {
console.log(evt.target);
});
});
answered Nov 20 '18 at 0:18
Kevin CollinsKevin Collins
1,2961912
Ah! Okay...I'm actually already using this approach because my listener is at the document level. I tried to simplify my original example...my actual listener (in content script) is: $(document).on( 'blur', '.parentDIV', function( e ) { // DO STUFF }); Can you add the textarea selector to that statement to limit the blur listener?
– 11teenth
Nov 20 '18 at 0:32
I would try $(document).on( 'blur', '.parentDIV textarea', function( e ) { // DO STUFF });
– Kevin Collins
Nov 20 '18 at 0:36
Many thanks! That did it...
– 11teenth
Nov 20 '18 at 2:21
add a comment |
How can I listen for blur on the child textarea?
You can catch changes to the child textarea by setting the blur handler on the parent. The second argument to jQuery's .on() can be a selector that acts as a filter, so that your handler will only listen to events fired by child elements that match the filter.
The callback function will receive an event object, and you can get the textarea element that fired the event using that object's .target property.
$(function () {
$('.parentDIV').on('blur', 'textarea', function(evt) {
console.log(evt.target);
});
});
answered Nov 20 '18 at 0:18
Kevin CollinsKevin Collins
1,2961912
How can I listen for blur on the child textarea?
You can catch changes to the child textarea by setting the blur handler on the parent. The second argument to jQuery's .on() can be a selector that acts as a filter, so that your handler will only listen to events fired by child elements that match the filter.
The callback function will receive an event object, and you can get the textarea element that fired the event using that object's .target property.
$(function () {
$('.parentDIV').on('blur', 'textarea', function(evt) {
console.log(evt.target);
});
});
answered Nov 20 '18 at 0:18
Kevin CollinsKevin Collins
1,2961912
answered Nov 20 '18 at 0:18
Kevin CollinsKevin Collins
1,2961912
answered Nov 20 '18 at 0:18
Kevin CollinsKevin Collins
1,2961912
answered Nov 20 '18 at 0:18
Kevin CollinsKevin Collins
1,2961912
1,2961912
Ah! Okay...I'm actually already using this approach because my listener is at the document level. I tried to simplify my original example...my actual listener (in content script) is: $(document).on( 'blur', '.parentDIV', function( e ) { // DO STUFF }); Can you add the textarea selector to that statement to limit the blur listener?
– 11teenth
Nov 20 '18 at 0:32
I would try $(document).on( 'blur', '.parentDIV textarea', function( e ) { // DO STUFF });
– Kevin Collins
Nov 20 '18 at 0:36
Many thanks! That did it...
– 11teenth
Nov 20 '18 at 2:21
add a comment |
Ah! Okay...I'm actually already using this approach because my listener is at the document level. I tried to simplify my original example...my actual listener (in content script) is: $(document).on( 'blur', '.parentDIV', function( e ) { // DO STUFF }); Can you add the textarea selector to that statement to limit the blur listener?
– 11teenth
Nov 20 '18 at 0:32
I would try $(document).on( 'blur', '.parentDIV textarea', function( e ) { // DO STUFF });
– Kevin Collins
Nov 20 '18 at 0:36
Many thanks! That did it...
– 11teenth
Nov 20 '18 at 2:21
Ah! Okay...I'm actually already using this approach because my listener is at the document level. I tried to simplify my original example...my actual listener (in content script) is: $(document).on( 'blur', '.parentDIV', function( e ) { // DO STUFF }); Can you add the textarea selector to that statement to limit the blur listener?
– 11teenth
Nov 20 '18 at 0:32
Ah! Okay...I'm actually already using this approach because my listener is at the document level. I tried to simplify my original example...my actual listener (in content script) is: $(document).on( 'blur', '.parentDIV', function( e ) { // DO STUFF }); Can you add the textarea selector to that statement to limit the blur listener?
– 11teenth
Nov 20 '18 at 0:32
I would try $(document).on( 'blur', '.parentDIV textarea', function( e ) { // DO STUFF });
– Kevin Collins
Nov 20 '18 at 0:36
I would try $(document).on( 'blur', '.parentDIV textarea', function( e ) { // DO STUFF });
– Kevin Collins
Nov 20 '18 at 0:36
Many thanks! That did it...
– 11teenth
Nov 20 '18 at 2:21
Many thanks! That did it...
– 11teenth
Nov 20 '18 at 2:21
add a comment |
Would you mind against some vanilla mixin? ;-)
Try this:
$('.parentDIV textarea')[0].addEventListener("blur", function(e){
console.log("Blur has been caught. Blur event: ");
console.dir(e);
});Does it work?
answered Nov 20 '18 at 0:19
Max KurtzMax Kurtz
987
add a comment |
Would you mind against some vanilla mixin? ;-)
Try this:
$('.parentDIV textarea')[0].addEventListener("blur", function(e){
console.log("Blur has been caught. Blur event: ");
console.dir(e);
});Does it work?
answered Nov 20 '18 at 0:19
Max KurtzMax Kurtz
987
add a comment |
Would you mind against some vanilla mixin? ;-)
Try this:
$('.parentDIV textarea')[0].addEventListener("blur", function(e){
console.log("Blur has been caught. Blur event: ");
console.dir(e);
});Does it work?
answered Nov 20 '18 at 0:19
Max KurtzMax Kurtz
987
Would you mind against some vanilla mixin? ;-)
Try this:
$('.parentDIV textarea')[0].addEventListener("blur", function(e){
console.log("Blur has been caught. Blur event: ");
console.dir(e);
});Does it work?
$('.parentDIV textarea')[0].addEventListener("blur", function(e){
console.log("Blur has been caught. Blur event: ");
console.dir(e);
});$('.parentDIV textarea')[0].addEventListener("blur", function(e){
console.log("Blur has been caught. Blur event: ");
console.dir(e);
});answered Nov 20 '18 at 0:19
Max KurtzMax Kurtz
987
answered Nov 20 '18 at 0:19
Max KurtzMax Kurtz
987
answered Nov 20 '18 at 0:19
Max KurtzMax Kurtz
987
answered Nov 20 '18 at 0:19
Max KurtzMax Kurtz
987
987
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384247%2fif-i-only-know-a-class-or-id-of-a-parent-element-how-can-i-set-a-blur-listener%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
