Disable bound click event in jquery - javascript

I try to disable the binded click event in jquery, but I can found only to unbind or off the event click. If I do unbind() I can't get back those binded functions back.
For eg: I have a three div binded various function with click event. In some case I dont want particular div click event. So I try to disable that event only can't try to unbind() or off() the event. If I unbind() the event from div then again I need to bind those functions back to that div. See fiddle
Is there a way to disable the event and enable back those events without unbinding it.
Thanks in advance.

You can stop event like this:
function handler(e){
if(yourcondition)
e.preventDefault();
else {
}
}

You can give a class name to those div's. And call the click event though this class name like
$(".class_name").click(function(){ });
and when you want to disable the click event then use the id selector to remove the class
$("#div_id").removeClass("class_name");
and when you want to add the click event then then use the id selector to add the class
$("#div_id").addClass("class_name");

in this example
http://jsfiddle.net/prollygeek/WuNGJ/2/
you can remove class pointer from all elements so that no element will respond to any bound action , once you trun back the class , it will respond normally , class binding and unbining can be done by clicking div 1.
$(".element").on('click',function(){
if($(this).hasClass("triggered"))
{
$(".element").addClass('pointer');
$(this).removeClass("triggered");
}
else if($(this).hasClass("pointer"))
{
$(".pointer").removeClass("pointer");
$(this).addClass("triggered");
}
//do whatever
})

Related

Jquery:Unbind click event on the class

I am using jQuery and i want to unbind the click event of dom element wherever a particular class is added to that dom element.
This particular class is added and removed dynamically using add class and remove class functions. So if the class is added on dom element and id that dom element has a click event i want to unbind the click event.
Why are you trying to bind and unbind the event? It may be simpler to do something like this:
$(document).on("click", "#element:not(.someClass)", function () {
// this function will only run if the clicked element doesn't have the class someClass
});
How about this:
$('.someClass').unbind('click');
or
$('.someClass').off('click');
You have the answer in your title.
I'm not sure what the context here is. How do you bind it in the first place and why do you want to unbind it?
An alternative way is to just ignore the click event if the element has a certain class.
$(selector).on("click", function(event) {
// Returning false will automatically call event.stopPropagation() and event.preventDefault()
if ($(this).hasClass("some-class")) return;
// Other code
});

Change binding on event for button using jQuery

I've bound an event to an icon on click. The event changes the id of a button on the page. I want a new event to be bound to that new id, and the existing event bound to the old id to be unbound. How do I do this?
I can see from Firebug that the button id successfully changes when the icon is clicked. However, when I look at POST, I see that the hidden field with id "Final_Approval" has the value of "Approved", which tells me that the event tied to the original button id occurred, and I don't want it to. All of my jQuery is inside document ready.
The original button:
<button id="btn-final-approval-no-review" class="btn btn-warning" type="submit">Final Approval</button>
The original event tied to that id:
$('[id^="btn-final-approval"]').click(function () {
$("#Final_Approval").val("Approved");
});
The event triggered when the icon is clicked:
$("#add-vendor-item").click(function () {
$('#btn-final-approval-no-review').attr('id', 'btn-vendor-rep-review2');
}
The new event I want to take place:
$("#btn-vendor-rep-review2").click(function () {
$("#ItemRequestStatusId").val("#Portal.BusinessModel.Entities.ItemRequestStatusId.VendorRepReview");
});
To bind events to elements that change dynamically, you need to use delegation with on():
$(document).on('click', '[id^="btn-final-approval"]', function() {
$("#Final_Approval").val("Approved");
});
As adeneo said, you probably shouldn't move IDs around, you should use classes. But the same idea applies, you just have to change the selector in the on() call.
Use on delegate to bind click event dynamically.
$("body").on("click","#btn-vendor-rep-review2", function () {
$("#ItemRequestStatusId").val("#Portal.BusinessModel.Entities.ItemRequestStatusId.VendorRepReview");
});
$(document).on('click', '#finalApproval', function() {
if($(this).hasClass('first')){
$(this).removeClass('first');
//first action to be preformed
}else{
//second action to be preformed.
}
});
then simply add class first to the button on page load.
If you need it to toggle back you can just re-add the class first in the second action to be preformed area
EDIT
after re-reading the question you probably cant use this - just substitute with the id / class of the item in question and add the if/else statement to the handler for that item.

Multiple OnClick JQuery events firing

I have a page with div and a button on it. I have added onClick event to both of them. Now when I click the button on the div the onClick of the div is also being executed. Is there any way that I can avoid this?
Thank You,
Try this, pass the event as parameter to your onclick event and call
event.stopPropagation();
event.preventDefault();
Your onclick event assignment should be:
$(button).click(function(event) {
// script here
event.stopPropagation();
event.preventDefault();
});
In your click handler you might want to use "stopPropagation" for example:
$("button").click(function(e) {
// handle this event
// ...
// don't pass this event up to parent handlers
e.stopPropagation();
} );
There's also a related function that you might want to read about called "preventDefault" which tells the browser not to do what it normally does automatically (e.g. submit a page when a submit button is clicked)
See also:
https://developer.mozilla.org/en/DOM/event.stopPropagation
http://api.jquery.com/event.stopPropagation/
What's the effect of adding 'return false' to a click event listener?
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
in the listener for the link element, you can put e.stopPropagation(), which should fix it (if you're using event bubbling).
If you aren't using jQuery, make sure you set the useCapture parameter of addEventListener() to False info - MDN; you want to be sure you know which direction your events are moving through the DOM (you want them to bubble).
You need to prevent the button onClick event from bubbling to the Div. So basically at the end of your onClick function for the button, once you have done all you logic, you need to call event.stopPropagation()
If none of the above work, try out:
$("button").click(function(e) {
e.stopImmediatePropagation();
});

How can delete Click event?

How can I completely delete the $(selector).click() event?
I created option buttons and I would like to stop the click event so that the user won't be able to change the option already selected.
How to complete the overriding of the click (or any other) event on jquery?
Try jQuery unbind
$('#foo').unbind('click');
This will unbind click event from element with id foo.
As #notzippy mentioned disabling button will be a better idea.
Usual method is to disable the button, that gives a visual indication that the button cannot be clicked and will not fire click events.
Do:
$(selector).unbind('click');
$(selector).unbind()
will remove all handlers.
$(selector).unbind('click');
will remove the click handlers.
In jQuery 1.7+, you should apply handlers with .on() and remove them with .off().

How to remove all click event handlers using jQuery?

I'm having a problem. Basically, when a user clicks an 'Edit' link on a page, the following Jquery code runs:
$("#saveBtn").click(function () {
saveQuestion(id);
});
By doing this, the onClick event of the save button calls the saveQuestion() method and passes on the ID of the question for which the 'Edit' link was clicked.
But if in the same session the user clicks edit on 2 questions, then instead of overwriting the previous click event handler, it instead causes 2 event handlers to run, one which might call saveQuestion(1) and the other might call saveQuestion(2). By doing this 1 question overwrites the other.
Is there a way to remove all previous click events that have been assigned to a button?
You would use off() to remove an event like so:
$("#saveBtn").off("click");
but this will remove all click events bound to this element. If the function with SaveQuestion is the only event bound then the above will do it. If not do the following:
$("#saveBtn").off("click").click(function() { saveQuestion(id); });
Is there a way to remove all previous click events that have been assigned to a button?
$('#saveBtn').unbind('click').click(function(){saveQuestion(id)});
$('#saveBtn').off('click').click(function(){saveQuestion(id)});
If you used...
$(function(){
function myFunc() {
// ... do something ...
};
$('#saveBtn').click(myFunc);
});
... then it will be easier to unbind later.
$('#saveBtn').off('click').on('click',function(){
saveQuestion(id)
});
Use jquery's off and on

Categories

Resources