Develop Reference

How can i unbind for specific jquery scroll event?

I am having scroll event.
this.todayScrollerRef = $(window).scroll(() => {
console.log('some stuff');
});
On button click i want to unbind from the event
So when i try
$(window).unbind('scroll');
it works - and i don't get some stuff in console when i am scrolling after the button click.
But because i have another window.scroll event i don't want to use $(window).unbind('scroll');
because it unbinds all of the scroll events.
So i want to unbind specific one - and when i try
$(window).unbind('scroll', this.todayScrollerRef);
for my created todayScrollerRef reference - it does not work.
Scroll event is not destroyed
I also tried with
$(window).on('scroll', this.todayScroller.bind(this));
todayScroller() {
console.log('some stuff');
}
// on btn click
$(window).off('scroll', this.todayScroller.bind(this));
and it still does not work.
Where is my mistake ?

Have your handler like this:
this.todayScrollerRef = function() {
console.log('sd');
};
to Bind
$( window).bind( "scroll", this.todayScrollerRef );
to unbind:
$(window).unbind( "scroll", this.todayScrollerRef );

How jQuery custom event namespaces work?

Having two listeners with the namespaces one.two.three and one.half.two.three. When triggering one.two.three triggers one.half.two.three to. Why?
$(document).on('one.two.three', function(e){
console.log('1st event');
});
$(document).on('one.half.two.three', function(e){
console.log('2nd event');
});
$(document).trigger('one.two.three');
// logs '1st event' and '2st event'

Using :not() to ignore clicks on children links?

In a script I'm writing with JQuery I'm trying to add a click handler to a div, but ignoring clicks on the children a tags inside it.
You can see a JSFiddle of how I'm currently trying (and failing) to make it happen here: http://jsfiddle.net/q15s25Lx/1/
$(document).ready(function() {
$(document).on('click', '.post:not(a)', function(e) {
alert($(this).text());
});
});
<div class="post">This is some text in a div. Click me please.</div>
In my real page, the a tags all have their own click handlers, so I need to be able to listen for those concurrently.
So, ideally I'd like to use something like the :not() selector to ignore clicks on this particular handler.
Is something like this possible?

You'll need to add another handler that acts on the anchor and stops the event from propagating:
$(document).on('click', '.post a', function (e) {
e.stopPropagation();
e.preventDefault();
});
Without this, when you click the a the event bubbles up to the parent .post, and the handler fires on that anyway.

You need to stop event propagation to child elements using .stopPropagation():
$(document).on('click', '.post a', function(e) {
e.stopPropagation();
});
Working Demo

Just return false; in the end of event handler.
$(document).on('click', '.post', function (e) {
alert($(this).text());//will show entire text
});
$(document).on('click', '.post a', function (e) {
alert($(this).text());//will show 'text'
return false;
});
working fiddle: http://jsfiddle.net/q15s25Lx/2/
return false will server as both e.preventDefault() &
e.stopPropagation()

Try to stop the event from bubbling up the DOM tree using stopPropogation()
$(document).ready(function() {
$(document).on('click', '.post a', function(e) {
e.stopPropagation();
alert($(this).text());
});
});
Fiddle Demo

All of the other posts did not explain why your code failed. Your selector is saying : Find an element that has the class post and is not an anchor. It is NOT saying if a child was clicked and was an achor do not process.
Now there are two ways to solve it. One is to prevent the click from bubbling up from the anchors. You would add another listener on the anchors.
$(document).on('click', '.post a', function (evt) {
evt.stopPropagation(); //event will not travel up to the parent
});
$(document).on('click', '.post', function (evt) {
console.log("Click click");
});
Or the other option is not to add a second event, but check what was clicked.
$(document).on('click', '.post', function (evt) {
var target = $(evt.target); //get what was clicked on
if (target.is("a")) { //check to see if it is an anchor
return; // I am an anchor so I am exiting early
}
console.log("Click click");
});

Or jsut let jquery handle it all for you. return false
$(document).on('click', '.post:not(a)', function() {
alert($(this).text());
return false;
});

jQuery event contextmenu triggers underlaying div

looking at this event (being bind on 2 divs overlapping each other, look at the jsfiddle)
.on('contextmenu', function() { ... });
Why do both divs being triggered?
How can I detect this and or stop the underlaying div from triggering?
DEMO: jsfiddle
Thanks for any information!

On nested element, you need to stop event bubbling:
$('#div2').on('contextmenu', function(e) {
e.stopPropagation();
$('#log').append('<p>div2 triggered contextmenu!</p>');
});
DEMO

DEMO
$('#div1,#div2').on('contextmenu', function (e) {
e.stopPropagation();
$('#log').append('<p>' + e.target.id + ' triggered contextmenu!</p>');
});
event.target
event.stopPropagation/

You need to prevent event from propogating, try this code:
$('#div1').on('contextmenu', function(e) {
if(!e.isDefaultPrevented()){
$('#log').append('<p>div1 triggered contextmenu!</p>');
e.preventDefault();
}
});
$('#div2').on('contextmenu', function(e) {
if(!e.isDefaultPrevented()){
$('#log').append('<p>div2 triggered contextmenu!</p>');
e.preventDefault();
}
});

.on event keeps getting fired over and over again

I'm trying to setup an event where it fires after my element is opened. So I have a tooltip and I have a click event which shows the tooltip. Then when that happens I setup a document click event that gets fired so if the user clicks anywhere on the stage it removes all tooltips. But what's happening is it gets called before the tooltip even gets a chance to show. So it's firing the document event over and over again.
$('.container img').popover({placement:'top', trigger:'manual', animation:true})
.click(function(evt){
evt.preventDefault();
el = $(this);
if(el.hasClass('active')){
el.popover('hide');
}else{
clearDocumentEvent();
el.popover('show');
$(document).on('click.tooltip touchstart.tooltip', ':not(.container img)', function(){
hideAllTooltips();
});
}
el.toggleClass('active');
})
var hideAllTooltips = function(){
$('.container img').popover('hide');
$('.container img').removeClass('active');
}
var clearDocumentEvent = function(){
$(document).off('click.tooltip touchstart.tooltip');
};

The problem stems from event bubbling. You can verify this by doing the following test:
$(document).on('click.tooltip touchstart.tooltip', ':not(.container img)', function(){
//hideAllTooltips();
console.log($(this)); // will return .container, body, html
});
Try using event.stopPropogation():
$(document).on('click.tooltip touchstart.tooltip', ':not(.container img)', function(e){
e.stopPropagation();
hideAllTooltips();
});
DEMO:
http://jsfiddle.net/dirtyd77/uPHk6/8/
Side note:
I recommend removing .tooltip from the on function like
$(document).on('click touchstart', ':not(.container img)', function(){
e.stopPropagation();
hideAllTooltips();
});