How to remove $(document).on click event? - javascript

Here is the code to add event
$(document).on({
click: function() {
$(this).hide();
$('#form_name').removeClass('hide');
$('#form_template_name')
.attr('placeholder', $(this).text())
.focus();
}
}, '.form-template-name');
For some conditions i dont want this event to trigger. So what I tried is
$('.form-template-name').off();
$('.form-template-name').unbind();
But nothing seems to work. Did I miss anything ?

You need to pass the event to unbind to .off(), also see the use of namepsaced event names
$(document).on({
'click.myevent': function () {
$(this).hide();
$('#form_name').removeClass('hide');
$('#form_template_name')
.attr('placeholder', $(this).text())
.focus();
}
}, '.form-template-name');
and
$(document).off('click.myevent', '.form-template-name');
Demo: Fiddle

Try this.
$(document).off('click', '.form-template-name');

An event handler is bound to an element. You can unbind an event handler from the element it is attached to, but you can't unbind it from a descendant element since that isn't where it is listening.
You can either:
Examine the target property of the event object (the first argument to your event handler function) to see what element was clicked on and then return before doing anything.
Bind a new event handler to the elements you want stop the event from triggering from and prevent the event from continuing up the DOM.

You can try with:
var clickEvent = function() {
$(this).hide();
$('#form_name').removeClass('hide');
$('#form_template_name')
.attr('placeholder', $(this).text())
.focus();
};
$(document).on({
click: clickEvent
}, '.form-template-name');
And unbind it with:
$(document).unbind('click', clickEvent);

Change your click handler to:
$(document).on({
'click.myevent': function () {
$(this).hide();
$('#form_name').removeClass('hide');
$('#form_template_name')
.attr('placeholder', $(this).text())
.focus();
}
}, '.form-template-name');
then you can use .off(), with name spaced event names:
$(document).off('click.myevent', '.form-template-name');

Try this:
$('.form-template-name').unbind("click"", event);
and define the click event as:
var event = function() {
$(this).hide();
$('#form_name').removeClass('hide');
$('#form_template_name')
.attr('placeholder', $(this).text())
.focus();
};
Then use it as you did before.

You can also try using the event.preventDefault() functionality. It is described in more detail here: http://api.jquery.com/event.preventdefault/

Related

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

Custom Context Menu on everything except "input" in jQuery

I want to add custom context menu with jQuery for the whole body of the page, except the textfields. How can I do that?
I have tried that code:
$('body:not(input)').bind('contextmenu', function(){
/*code*/
});
Check the srcElement before plugin executions. If it's not an input element, do trigger the contextmenu plugin:
$(document).on("contextmenu", function(e) {
if (!$(e.srcElement).is(":input")) { // if it's not an input element...
$(this).triggerTheContextMenuPlugin();
}
});
Use an event listener on the document and check if it was initiated by an input element.
$(document).on("contextmenu", function (e) {
if (e.target.tagName.toUpperCase() === "INPUT") {
console.log("context menu triggered");
}
});
Demo here
Inspired by Salman's solution.
You can stop the event propagation in all input elements, with the e.stopPropagation() function. In doing so, you keep the default behavior of the inputs elements:
$(function() {
$(document).on("contextmenu", function(e) {
alert("Context menu triggered, preventing default");
e.preventDefault();
});
$("input").on("contextmenu", function(e) {
e.stopPropagation();
});
});
JSFiddle Demo

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

Jquery on hover not functioning

I'm changing my codes to be compatible with jQuery 1.8 and I'm stuck with this hover which doesn't work. When I used then same thing with a click it worked. Here is my code, can anyone tell me where I'm going wrong?
$(document).on('hover', '.top-level', function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}, function () {
$(this).find('.dropfcnt').hide('blind', function () {
$('.actionfcnt').hide();
});
});
Deprecated as of jQuery 1.8: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.
Source: http://api.jquery.com/on/#additional-notes
That pretty much says it all, you cant use "hover" for that:
$(document).on('mouseenter','.top-level', function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}).on('mouseleave','.top-level', function(){
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});
there is no "hover" event.
there is .hover() function that takes 2 callbacks (as in your example).
Try:
$(".top-level").on({
mouseenter: function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
},
mouseleave: function (event) {
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
}
});
OR
$(".top_level").on("hover", function(event) {
if(event.type == "mouseenter") {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}
else if (event.type == "mouseleave") {
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
}
});
.on function has only 3 parameters : http://api.jquery.com/on/
If you don't need your handlers be bound to dynamically added elements as well, then you may use the good old hover function with 2 event handlers.
$('.top-level').hover(function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}, function (event) {
$(this).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});​
By the way, $(selector).hover(handlerIn, handlerOut) is shorthand for $(selector).mouseenter(handlerIn).mouseleave(handlerOut);.
If you need to, then use on for mouseenter and mouseleave events:
$(document).on('mouseenter', '.top-level', function (event) {
$(this).find('.actionfcnt').show();
$(this).find('.dropfcnt').show();
}).on('mouseleave', '.top-level', function (event) {
$(this).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});​
Try
$('.top-level').hover(function (event) {
$( this ).find('.actionfcnt').show();
$( this ).find('.dropfcnt').show();
}, function(){
$( this ).find('.dropfcnt').hide('blind', function(){
$('.actionfcnt').hide();
});
});

How to bind click events to a different class?

So I have two click events for "button-open" and "button-close". I have one button that switches from "button-open" to "button-close" on click. So when i click it again, it should fire the event for "button-close" but instead it fires the event for "button-open" again.
Demo : jsFidde
Here's my code:
Button​
<script>
$(document).ready(function() {
$(".button-open").click(function() {
$(this).removeClass("button-open").addClass("button-close");
alert("Open Was Clicked");
});
$(".button-close").click(function() {
$(this).removeClass("button-close").addClass("button-open");
alert("Close Was Clicked");
});
});
</script>
Use on() instead of click(), since you need to bind to an element that doesn't yet exist when you initially bind it.
$(document).on('click', '.button-open', function() {
$(this).removeClass("button-open").addClass("button-close");
alert("Open Was Clicked");
});
$(document).on('click', '.button-close', function() {
$(this).removeClass("button-close").addClass("button-open");
alert("Close Was Clicked");
});
DEMO.

Categories

Resources