We Keep Coding

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!

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);
});
});

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?

Handle blur event of parent element fired by focus on child element and by clicking outside of child

I have a "parent div" containing a child box input type=number. When user clicks outside of input box I use blur or focusout event of parent div to use input values at some other place.
I also need to use $('inputbox').trigger('focus') at some place, which fires "parent div"'s blur event unwantedly and runs code on that event.
Please give a solution to stop this parent blur event on child's focus OR give a way to find whether focus is made by trigger('focus') on child element or by user clicking outside of parent div.
I need to fire parent Blur only when user clicks outside of it & not when focus is triggered through code.

with jquery you can make custom events very easily , something like:
$('inputbox').trigger('special-focus');
then you can wait for this event just like any other event:
$('div').on('special-focus' , function(){ ... } );
this will prevent your events from interfering with the built in ones.
I guess if you don't want to use that suggestion then do this in your click handler or your focus handler of the child
.on('focus' , function(e){
e.stopPropagation();
e.preventDefault();
/// the rest of your code ...
});
this will stop the propagation of events to parent elements

This worked perfect for me:
if (e.relatedTarget === null) ...

What worked for me was checking the relatedTarget property of the eventObject object in the handler function.
$("#parentDiv").focusout(function (eventObject) {
if (eventObject.relatedTarget.id === "childInputId")
/// childInput is getting focus
else
/// childInput is not getting focus
});

.on('blur',...) of parent fires before .on('focus' ,...) of child.
Anyways for a parent div containing child input box
we can use $('input').trigger('special-focus');
and then
$("#form" ).on('special-focus', '.parentdiv' , function(event) {
$("#form" ).off('blur', '.parentdiv');
$(event.target).focus();
$("#form" ).on('blur', '.parentdiv' , showValuesOnBlur);
});
Now blur of parent will not fire on focus of child.This worked for me. i.e. off & on the blur event of parent inside special-focus.
Thanks Scott Selby :)

How to prioritize Nested JavaScript events?

I have an edit button inside a table cell.
The table cell event has an "click" event, And the edit button who is inside a cell has another click event set to it.
Is there a way to prioritize the button event over the table cell event?
I tried using a different z-index for the button, but it didn't work.
The button cannot go outside the the table as its closest tr holds id data which is crucial for the proper event to function.

You can call event.stopPropagation() as part of the click handler for the button, to prevent the click event from bubbling up to the table cell. Documentation: http://api.jquery.com/event.stopPropagation/

Inside the click handler on the button, you just need to call event.stopPropagation().
element.onclick= function(event) {
// ...
event.stopPropagation();
// ...
}
Look into a tutorial on bubbling and capturing events, such as http://javascript.info/tutorial/bubbling-and-capturing

How do I make it so that if I click an <a> element it goes to the link, but it doesn't trigger the .click() event of its parent element?

I want to be able to click on a particular <a> and activate the link out, but not the parent's click.
preventDefault() doesn't work because then it won't link out.

You should use e.stopPropagation() to stop the event from bubbling.
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
~from jQuery docs .stopPropagation

You have to use stopPropagation instead of preventDefault
$('a').click(event){
event.stopPropagation();
});

Is it possible to have jQuery.click trigger on the top element only?

I'm trying to make a site where the user can click on any element to edit it's CSS. I use the following to add the click function to all <li>, <div> and <ul>.
$('li,div,ul').click(function () {
alert(this.id);
});
The problem is if I click on a <li> element, then I get the alert for that and any element underneath it. (all the containers).
Is it possible to have only the top element trigger when clicked?

You want to stop event propagation, you do this in jQuery by calling the stopPropagation method on the event object.
$('li,div,ul').click(function (e) {
e.stopPropagation();
alert(this.id);
});

I believe you'd want to use stopPropagation(); inside the click function.

It sounds to me like you're looking for .stopPropagation(). Calling stopPropagation will prevent the event from "bubbling" up to parent containers.