So on Friday I asked this question and it wasn't well written, let me explain this in better detail:
So this might sound remedial, but I have this container that I include a mousedown event and all I want to do is toggle it without destroying the properties of it.
If it do :
$("#div").unbind("mousedown") // This will just destroy the event.
I was thinking I could move the event to a dom element that isn't being used? And then just switch it back when I'm done...
So this is whats happening : I have a plugin lets just call it Vinny for now
$("#div").vinny(settings);
vinny has a mousedown event that I want to enable/disable via a trigger.
I was thinking I would have a $fn.disableMouseDown function that could disable it, but was curious if theirs a way to unbind a mouseDown on the dom but not destroy it?
If you know of a quick way of doing it help me out! Thanks, Vinny
Put your command inside a function, so you can bind/unbind with one line only, i.e:
function some() {
// some commands
}
$("#div").bind("mousedown", some);
$("#div").unbind("mousedown");
One approach is to just use a named function, bind it when it's needed and unbind it when it's not:
function foo () {
// do something on mousedown
}
// When needed:
$("#div").bind("mousedown", foo);
// When not needed:
$("#div").unbind("mousedown", foo);
I would just stick an if(toggle) statement inside the event. Any reason you can't do that? (only thing i can think of is you wouldn't want to have the event being continually fired over and over, which makes sense - is that the case?)
here is a working example http://jsfiddle.net/samccone/ENzyk/
I think this is a simple and elegant solution
Hey guys thanks for all the ideas, but I kinda did a hacky way of approaching this.
I explainz:
So this plugin on the mousedown is binded in the plugin.init() and in their i defined a local function checks disableValue and in their I just check the dom for a or do a bool return and run that against the other function that was already present in exiting the mousedown event.
Make sense? I hope so too
Thanks,
Related
I was having duplicates events with this code that was purposely supposed to run multiples times:
$('selector').on('change', myFunction);
Then I did some Googling and I saw that I could/should do
$('selector').off('change', myFunction).on('change', myFunction);
to unbind it first, which makes sense, but I still had the same issue ending up with multiples bindings.
Then curiously I changed my code to include a () after my function's name on the off() part and it worked!
$('selector').off('change', myFunction()).on('change', myFunction);
So, my question is: am I doing right by using myFunction() instead of myFunction on the off() part?
http://api.jquery.com/off/
There is no off overload that accepts the set of parameters you are calling it with. Your "working" code does the same as
$('selector').off('change').on('change', myFunction);
with unwanted side-effect of executing myFunction in .off('change', myFunction()).
Just delegate the event once on page load and don't add multiple listeners
$(document).on('change','selector', myFunction);
I used document but you can move that to a closer permanant asset in the page that is an ancestor of the element(s)
After researching a bit I got it working properly using
$('selector').off('.myNamespace').on('change.myNamespace', myFunction);
Doing this I don't end up unbinding any other event, I just unbind the one I really need.
PS.: I still don't know why $('selector').off('change', myFunction) doesn't work but I'll move forward.
Thanks.
Im confuse on how the event methods/functions related to each other when they are use at the same time.
For Example:
$("#searchInput").blur(function(e) {
var isClicked = false;
$("#sresult").click(function(e) {
isClicked = true;
});
if(isClicked) {
$("#sresult").show(150);
} else {
$("#sresult").hide(150);
}
});
The code above shows when I blur on the #searchInput, it will either show #sresult when you click it or hide it when when you did'nt click it.
But there is something wrong in my code that I don't know why it keeps hiding even if I clicked the #sresult.
Is it that maybe when you click the #sresult, the $("#searchInput").blur(function(e) is fast enough that he didnt want to wait in $("#sresult").click(function(e) to function? are event methods are waiting for each other? are they synchronize? correct me if im wrong.
Thanks in advance.
The Problem
It's important to understand what .blur() and .click() functions really do. They attach event listeners to a certain element. (Better use .on() btw)
The Explanation
To your code: blur fires, prepares a variable and attaches another event listener. as the if-else statement is also in the blur callback it's executed immediately and thus not waiting for the click, meaning isClicked will never be true.
Using nested event listeners is almost never a good idea, you just saw why in your own case.
The Solution
Am I right with the assumption you're trying to hide a search results field until the search button is clicked? If yes I could help you with code. Though, the easiest approach might be to simply attach a listener for the button and then .toggle() the results.
I know if you move mouse, that event will invoke however how can I invoke that event just with help of the code?
Trigger event in jQuery can help you so much
AFAIK you cannot move the user's mouse pointer if that was the question.
It would be called "mousejacking" ;)
Not sure why you ask, but, if your goal is to simulate a click on another element you could do:
$('#element_1').click(function(){
$('#element_2').click();
});
If you have a jQuery element from which you want to fire an event you need the trigger method
var $t = jQuery('#idToElement');
$t.trigger('mousemove',['parameter1','parameter2']);
If you want to do this with pure javascript you need the createEvent function of the document object. You can find more about that here
I am wondering if you guys know different approach to disable an event for a while. Let me elaborate this more :
Lets say I have a div or button which has a subscriber to its onclick event. To prevent the double click when the the methods are doing some ajax things, these are the some of the ways we can do :
Disable the button till the method finishes its job
Unbind till the methods finishes its job and then bind it again.
Use some kind of flagging system like boolean so it will prevent method from working more than once.
So is there any other ways, maybe some javascript tricks or jQuery tricks which is more efficient and better practice.
Thanks in advance.
I just add some class like 'disabled' to that div or button. And in my function registered to the onclick event, I check if that class is present. If yes, just return.
Can't think of any other way other than what u have stated.
I think the boolean flag is quite an elegant solution, and you can keep it "contained" by using a property of the handler, like so:
$(someElement).click(myHandler);
function myHandler() {
if (!myHandler.inProgress) {
myHandler.inProgress = true;
// Do stuff
// Set it back to false later
}
}
I can't think of a more 'tricky' or 'elegant' solution, than the ones you listed.
what is so inefficient in disabling an element or removing a binding?
I have a lot of dijit.TitlePanes stacked up one after another. I wish to handle the onmouseover and onmouseout events for the tile part of the TitlePane. What is the correct way of doing this?
Will something like :
dojo.connect(titlePane.titleNode, 'onmouseover', function f() {});
work, where titlePane is a reference to some dijit.TitlePane object?
Is there some declarative way of setting up such an event handler using "dojo/method"?
The only way that I know of connecting events in Dojo is through explicit calls to dojo.connect. In other words, I don't believe that you can pass in event handlers as part of the title pane's constructor. My question to you is, does what you have work?
Looks like it should work, except connect to titleBarNode.
Also, onmouseenter is better than onmouseover.