I have this event handler that looks something like:
$(document).on('click', 'a.close, #mask', Popup.close);
and I can't figure out how to change the function (Popup.close) dynamically for this event. The Popup.close variable is a local function that can be set by calling Popup.setClose(func), and I was hoping that this would then change the function that is called when this event is fired. I then realized that I may have to unbind the event, and bind the new function every time I want to change the Popup.close() function. Regardless, I could not figure out how to unbind and event that was previously bound using the .on('click',...) method.
So what I am asking is, what is the best way to change the executing function for a jQuery event bound using the .on() method?
I appreciate your help.
You can use .off("click") to remove the event and then attach the new event, but this will remove all click events.
$(document).off('click');
Or to preserve other events that may have been attached:
$(document).off('click', 'a.close, #mask');
JS Fiddle: http://jsfiddle.net/3Xzjj/
Related
I'm familiar with attaching a handler to a checkbox's property change like this:
$(function(){
$("#chkbox").change(function(){
alert($(this).val())
});
});
However, doing this $("#chkbox").change(); will fire my alert, but the state of the checkbox won't actually change, which tells me that jQuery is just firing off handlers that it's already bound to an element. What is the use of calling it like [bourbon.io][1] does to close its modal?
$(".modal-fade-screen, .modal-close").on("click", function() {
$(".modal-state:checked").prop("checked", false).change();
});
If I omit the .change() at the end, the modal still closes and it seems everything works fine. What is the use of chaining change()? I ask, because I am trying to use Angular with this modal, and I need to invoke closing the checkbox's state so I can close the modal with some other buttons. angular.element(".modal-state:checked").prop("checked", false); seems to work fine, but since I'm not aware of anything like change in Angular
(it doesn't exist in jQlite), I want to be certain I'm not missing anything.
If you attach an change event listener to an element, every time a user triggers that event the event handler will fire. However, if you programmatically manipulate the element with change that would normally fire the event handler, the event handler would not fire. Therefore, you want trigger the change event manually once you made the change so that the event handler can be triggered.
$(".modal-state:checked").prop("checked", false).change();
//or $(".modal-state:checked").prop("checked", false).trigger('change');
What is the use of chaining change()? It all depends on what the change event handler does.
I have a situation where a click eventlistener is being set on on a dynamic element using jQuery's .on:
$('body').on('click', '#email-me', function() {
call my code....
});
and later on in the page, I have to remove this listener - but - and here's the catch - I DON'T have access to jQuery anymore (long story), which means pure js...
so, I can't use unBind(), and even if i name my anonymous function up there, it still won't remove the event listener.
How do I remove the bind, so this element isn't clickable anymore?
Thanks for reading!
You can't. jQuery events are handled differently than normal javascript events.
When you add an event to an element with jQuery, these steps are followed:
If the element hasn't been initialized with an internal (internal to jquery) datacache, it gets initialized with a datacache, then the datacache is returned.
If this is the first event handler added for that event type, a special event is added to the element for that event type that executes jQuery.event.dispatch.
Finally, the handler(s) that you passed in are added to the datacache.
Therefore, the only way for you to remove this event is to get ahold of the special event handler that jQuery bound that triggers jQuery.event.dispatch, but since you don't have access to jQuery, there's no way you will get that event handler. (even with access to jQuery, I don't think you can get that handler.)
You need to instead find a way to retain access to jQuery, or don't use it at all.
I have a problem, I'm assigning a function to the onmouseout event, but after running the event, I need to remove it. would greatly appreciate your help.
This depends on your code, if you did this with d3, then you can say
inside your onmouseout event-function:
element.on("mouseout",func);
function func(){
/*do your stuff*/
element.on("mouseout",null);
}
If you bound the event via an event-attribute like <div onmouseout="..." > then you have to refactor this. In this case, simply use the d3 on() function to bind the event.
If you want to bind multiple handlers to the same event, you can use namespacing: By appending .name to the event, you can address them more specifically.
I'm assuming you added your event listener with d3's on event. their docs for removing an event is such:
If an event listener was already registered for the same type on the
selected element, the existing listener is removed before the new
listener is added. To register multiple listeners for the same event
type, the type may be followed by an optional namespace, such as
"click.foo" and "click.bar". To remove a listener, pass null as the
listener.
I can't correct your code, because you didn't add any.
Another way is to use jQuery:
$(element).bind("mouseout", myFunction);
$(element).unbind("mouseout");
jQuery unbind
jQuery bind
You can also use an optional namespace in the first parameter like:
"mouseout.myNamespace"
With this namespace you can bind/unbind multiple events of the same kind.
Another thing that maybe is interesting to you:
jQuery stopPropagation
I want to trigger this jquery function by using trigger method of JQuery. How can I do that ? Actually I dont even know the trigger method is suitable for user defined functions.
$('a.pop').click(function() {alert('testing'); }
this is not working
$('a').trigger(testtt);
var testtt = function(){ alert('aaa');}
Very similar to the way you install the event handler:
$('a.pop').click();
If you have the name of the event you want to trigger as a string, you can also do it this way:
$('a.pop').trigger('click');
This is also the solution to use if you want to pass crafted data to the event handler -- trigger also accepts a second parameter.
You can trigger a click event on the element by simply running
$('a.pop').click()
$('a.pop').click(), or if you're triggering some dynamic method, or custom event:
$('a.pop').trigger(eventName), e.g: $('a.pop').trigger('click');
Reading from jQuery API, the following should work.
$('a.pop').trigger('click');
.trigger() is used to trigger event handlers (custom or built-in'). Since you bound your function to the "click" handler, you can use trigger like so to call it:
$('a.pop').trigger('click');
jQuery's event binding methods can also be called without parameters to trigger them, which means you can also do this:
$('a.pop').click();
I have setup onclick event handler in the following manner:
element.onclick = function() { /*code */ }
Imagine there are event handlers setup using jQuery method bind() or similar handlers.
$('element').bind('click', function(){/*another function*/})
How can I prevent invoking handler defined with jQuery from the handler I have described in the beginning?
NB stopPropagation() and etc. jQuery's methods doesn't work from that function, because it is passed with native event object.
I'm not 100% sure what you're asking but maybe this will help:
You can create a new event object (compliant with W3C DOM) via jQuery's exposed Event constructor:
For example:
element.onclick = function(e) {
var aBetterEventObject = jQuery.Event(e);
// Now you can do what you want: (Cross-browser)
aBetterEventObject.preventDefault()
aBetterEventObject.isDefaultPrevented()
aBetterEventObject.stopPropagation()
aBetterEventObject.isPropagationStopped()
aBetterEventObject.stopImmediatePropagation()
aBetterEventObject.isImmediatePropagationStopped()
}
EDIT: Reading through your question again, I don't think propagation is the problem - you seem to want to cancel an event handler from running within an event handler - I'm not sure this is possible. You could just unbind all handlers (jQuery(elem).unbind('click')) but I don't think that's what you're after...
try to add the following line in the jQuery event handler:
return false;
Following on from JimmyP's answer. I've tried this
$('#x').click( function(e){
alert('hello');
});
document.getElementById('x').onclick = function(){
$('#x').unbind('click');
alert("goodbye");
}
The jQuery event runs once in this example. I don't think you can rely on the order of handlers being invoked however you define them, so I guess you'll have to accept that the jQuery event might fire once. Adding the onclick first does prevent the jQuery event from firing at all but, as I said, I don't think that's reliable.
Jquery has a method for namespacing events. http://docs.jquery.com/Namespaced_Events
You can add, trigger and remove separate functions bound to the same event via namespaces:
$("a").bind("click.custom1",function(){ ... });
$("a").bind("click.custom2",function(){ ... });
$("a").trigger("click.custom2");
$("a").unbind("click.custom2");
As long as you unbind the namespaced event your normal onclick should be unaffected. You may have to bind two separate namespaces to the click event as above if that doesn't work.