How to prevent multiple event calling with jQuery on("change") - javascript

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.

Related

Using jQuery .on() for all events

Is it considered bad practice to use jQuery's .on() event handler for every event?
Previously, my code contained script like this:
$('#cartButton').click(function(){
openCart();
});
However I've recently started using InstantClick (a pjax jQuery plugin).
Now none of my scripts work. I understand why this is happening, but I cannot wrap my code with the InstantClick.on('change', function(){ tag as this means my code starts to repeat itself. For example, clicking on the cart button will run the openCart() function many times. So to get around this, I'm changing all my functions to something like this:
$(document).on('click', '#cartButton', function(){
openCart();
});
I'm curious as to whether this will increase loading times and cause excess strain. Is it bad practice to use the on() event handler for every event in my code?
It's not bad practice at all..
.on is the preferred method for handling all events, and using .click is just a shortcut that gets passed to the .on method anyway..
If you check out here (unminified source for jquery 2.1.0): https://code.jquery.com/jquery-2.1.0.js
Here are a couple notes:
search for this line: on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
This is the function definition for the on method and just shows you what the code is doing..
also search for this line: jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick "
Th code below this line is mapping all the directly callable shortcuts (like click) and shows you that they are just mapping to the 'on' method.
Hope this helps!!!
No it is not a bad practice to use .on(), actually if you check the source of the .click() function, you'll see that it actually calls .on().
But... Instead of creating an anonymous function, you should simply do this, which would be cleaner, and slightly faster:
$(document).on('click', '#cartButton', openCart);
and
$('#cartButton').click(openCart);

jQuery click event not triggering button action

I am using jQuery and I have loaded a bunch of JavaScript for a web page which works as expected. However when I try to add the following code to trigger a button click, the button is not activated:
$(document).ready(function(){
$('.add_link').click();
});
I am wondering what I am doing wrong? I have this bit of code in a separate file that gets loaded after all the other JavaScript files are loaded. Any hints?
$('.add_link').click();
Maybe the button is not found, because it does not have the specified class. Look for typos or maybe you just forgot to set the class for the button?
What should happen, when you click the button?
What is the html code for this?
I have found the answer after playing around some more. Since I am using Drupal, I need to use a closure to make sure it works correctly. The correct code should be:
jQuery(document).ready(function($){
$('.add_link').click();
});
It is always the small things that trip you up. Thanks for all the responses.
HTML:
<button class="add_link">Click ME</button>
Javascript:
$(document).ready(function(){
$('.add_link').click(function(event){
//I'm the event handler
console.log(event);
alert(".add_link clicked!!!");
});
});
Other examples:
$(document).ready(function(){
//Named function
function myHandle(event){
//I'm the event handler
console.log(event);
alert(".add_link clicked!!!");
}
//adding event with event alias
$(".add_link").click(myHandle);
//adding event with jQuery.on
$(".add_link").on("click", myHandle);
//adding event with jQuery.on and delegation
$("body").on("click", ".add_link", myHandle);
});
I use jQuery.on because syntax of delegation and simple event handling is almost the same. jQuery.on is newer then jQuery.bind, jQuery.live and jQuery.delegate too.
jsFiddle

Why when initiating $.click() several times, and if the link is clicked once, it captures it more than once?

I have something like:
function init(){
$('.btn').click(function(){
//do something;
}
}
And when new content is added via ajax, I'm calling init(), so that click event applies to new buttons. But when I click it once, it captures several clicks (as many times as I called init()). It makes sense, but how to avoid it?
jsFiddle link: http://jsfiddle.net/s2ZAz/8/
Solutions:
* Use $.delegate() - http://api.jquery.com/delegate/
* Use $.live() - http://api.jquery.com/live/
Less preferred, but still, solutions:
* Use $.off() - http://api.jquery.com/off/ or $.unbind() - http://api.jquery.com/unbind/
click says, "for every object matching the selector, hook up this click listener". You probably want something more like delegate that says "for every object that will ever match this selector, hook up this listener".
$(document).delegate('button', 'click', function() {
});
You will still get double callbacks if you call init twice, but in this manner, you won't have to call init twice, because as new objects are added, they'll already be assigned to click listeners.
Note that document above should be replaced with the nearest persistent ancestor, as per Greg's comment below.
Demo.
Since jQuery 1.7, you can preferably use the .on() function to achieve the same effect.
Demo.
You can use the unbind method to remove the event handler (or the off method if you're using the new jQuery 1.7 syntax for attaching handlers)
Better yet, you can use the live method, to set up the event handler for any elements that are added to the page in the future and match the given selector. In this way you only have to call init once.
$("body").delegate("button", "click", function() {
alert('I\'m annoying!');
});
$('div').append("<button>Click me, I will alert twice</button><br/>");
$('div').append("<button>Click me, I will alert once</button><br/>");
$('div').append("<button>Click me, I will not alert at all</button><br/>");
Try it out
As mentioned by David, and as per liho's delegate example (loved the way the fiddle cascaded how many times the alert would pop!!), the problem is with multiple bindings, which can be solved with .live() (deprecated) or .delegate() (being phased out), or .on() (the preferred). However, it is a mistake to delegate listening to the document or even body node in terms of performance.
A better way to do this is identify an ancestor of the button that will not ever be destroyed. body is an easy choice, but it's almost always the case that we build our pages with wrapper elements of some sort, which are nested one or more levels deeper than body and therefore allow you to set fewer listeners.
HTML:
<div id="someWrapper">
<div class="somethingThatGetsDestroyed">
<button>Click Me</button>
</div>
</div>
JS using jQuery 1.7+:
$('#someWrapper').on('click', 'button', function() {
alert('Clickity-click!');
});

Jquery - Toggle mousedown event without destroying it in the dom?

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,

Event handling jQuery unclick() and unbind() events?

I want to attach a click event to a button element and then later remove it, but I can't get unclick() or unbind() event(s) to work as expected. In the code below, the button is tan colour and the click event works.
window.onload = init;
function init() {
$("#startButton").css('background-color', 'beige').click(process_click);
$("#startButton").css('background-color', 'tan').unclick();
}
How can I remove events from my elements?
There's no such thing as unclick(). Where did you get that from?
You can remove individual event handlers from an element by calling unbind:
$("#startButton").unbind("click", process_click);
If you want to remove all handlers, or you used an anonymous function as a handler, you can omit the second argument to unbind():
$("#startButton").unbind("click");
Or you could have a situation where you want to unbind the click function just after you use it, like I had to:
$('#selector').click(function(event){
alert(1);
$(this).unbind(event);
});
unbind is your friend.
$("#startButton").unbind('click')
Are you sure you want to unbind it? What if later on you want to bind it again, and again, and again? I don't like dynamic event-handling bind/unbind, since they tend to get out of hand, when called from different points of your code.
You may want to consider alternate options:
change the button "disabled" property
implement your logic inside "process_click" function
Just my 2 cents, not an universal solution.

Categories