Why wrapping into a function is required in .change() of jQuery? - javascript

Why this works in jQuery :
$('#selCars').change(function(){
alert( "I have changed!" );
})
but not this one :
$('#selCars').change(alert( "I have changed!" ) );

You pass a function reference to .change(). Your second example just has code there, not a function reference.
Your first example works because it passes a function reference which IS what is required.
A function reference is required because this is a callback that will be called at a later time. The .change() function which executes immediately needs to save the callback reference into it's own variable and then call it later when the change event actually occurs. To do that, it needs a function to call at that later time, not a raw piece of code.
And, the other answer is because, .change() was written to require a function reference. That's how the developers that spec'ed and wrote it designed it. If you want it to work, you have to follow their rules.

Because it's a callback, i.e. you're passing something that be called back later, so what you've to pass is a reference to a function, and that reference will be stored and called when the event will fire.
The change method doesn't store some code, it stores only a pointer to the function. Your function is called an event handler.

It's because .change() attaches an event handler to an element. The handler won't be called until the event has occurred.
Since in JavaScript, functions are just another datatype, you could also do this:
var handler = function(event) {
alert("I have changed!");
}
$('#selCars').change(handler);
Note that handler is a function, Whereas alert() would just return undefined.

Related

pass arguments inside button onclick function inside bindPopUp in leaflet

I am trying to create a button listener function inside bindPop in leaflet. But it does not read parameter of onclick function. In the below code alertConfirmed()function works fine for me but filterEventsBasedOnCluster(feature) does not read the parameter 'feature'. It says feature is not defined. feature is an object.
here is the code:
layer.bindPopup('<div id="alert">Found...!<input type="button" value="Please confirm" onclick="alertConfirmed()"> <input type="button" id="create" value="see patients" onclick="filterEventsBasedOnCluster(feature)"><table id="table"></table></div>')
`
Any help is much appreciated.
If you attach event handlers via the onclick HTML attribute, you can not control the parameters received by that handler. Let me quote the docs:
The single argument passed to the specified event handler function is a MouseEvent object. Within the handler, this will be the element upon which the event was triggered.
The way to pass a custom argument is to define a closure, by having a function that returns a function that receives only the event reference.
This is exactly the same solution as described in «Leaflet.contextmenu callbacks» and «Leaflet marker event fires at wrong time».
Read that. I mean it.
So in the end it should look something like:
function getHandlerForFeature(feat) { // A function...
return function(ev) { // ...that returns a function...
console.log(feat); // ...that has a closure over the value.
}
}
layer.bindPopup("<button id='mybutton'>Foo!</button>")
// The button doesn't exist in the DOM until the popup has been opened, so
layer.on('popupopen', function(){
L.DomEvent.on(
document.getElementById('mybutton'),
'click',
getHandlerForFeature(layer) // The result of this call is the event handler func.
);
});
Note that you can not use the onclick="code" syntax, as you need to create a string of runnable code, and that code will only be able to access variables in the global scope. Sure, you can JSON.stringify() your data, but you won't be able to have references to variables outside.
try this:
I am just correcting the wrong part only:
onclick="filterEventsBasedOnCluster('+feature+')"
You are not passing the variable properly.

jQuery .click() function called automatically

I have an event listener set up on a button using jQuery, and for some reason the function within the click listener is called without the button being clicked. I know that usually functions are anonymous in listeners, but it won't work as an anonymous function. The function I am calling also has to accept parameters, which is why I don't think I can just call a reference to the function. Any ideas on how I can fix the problem of the function getting called without a click even registered and still pass the necessary parameters to the function?
$('#keep-both').click(keepBothFiles(file, progress, audioSrc));
calls this function
function keepBothFiles(file, progress, audioSrc) {
...
...
}
You're referencing the function incorrectly. Try this instead:
$('#keep-both').click(function(){
keepBothFiles(file, progress, audioSrc);
});
Whenever you use the syntax funcName(), the () tell the interpreter to immediately invoke the function. The .click method requires that you pass it a reference to a function. Function references are passed by name only. You could also do:
$('#keep-both').click(keepBothFiles);
But you can't pass it your other arguments. It's given an event object by default
You must pass a function reference to the .click() function, not the result of calling a function. When you include the () like this keepBothFiles(...) at the end of the function name, you are telling javascript to execute the function now. When you just use the name of the function like keepBothFiles, you are getting a reference to the function (which can be called later).
You are currently calling your function immediately and then passing the return value of that function (which is not a function reference) to the .click() function, thus it does not do what you want.
The click handler callback function is passed exactly one parameter (the event) in jQuery so you cannot have it call your keepBothFiles(file, progress, audioSrc) function directly like you have it.
Instead, it could be done like this with a second wrapper function:
$('#keep-both').click(function(e) {
keepBothFiles(file, progress, audioSrc);
});

JavaScript .click() unintentionally auto-starting

I created a custom variable/function that I am trying to execute when an element is clicked. For some reason, it decides to display onload and ignores the .click(). I've spent a while now trying to figure this out, but I'm not having much luck.
Here's my custom function:
var movebox = function (entry) {
$imagebox.css('left' , '0');
$('#wr').append(entry);
};
I'm attempting to call it like this, but it calls it when the page loads instead.
$l3.click(movebox('test'));
You're calling the movebox function immediately instead of passing the function as a reference to the click event handler. This is a common mistake in JavaScript. Instead, pass in your function inside of an anonymous function, like so:
$l3.click(function() {
movebox('test');
});
As an aside, the same mistake is oftentimes made with setTimeout, setInterval, addEventListener, and the infamous eval. Remember, when treating functions as arguments to another function, be sure to wrap them in anonymous functions.
You are calling the movebox then passing the returned value to click event handler, in this case you can use the .on() event registration helper to pass a data element to the event handler which can be accessed using the event object.
Try
var movebox = function (e) {
$imagebox.css('left' , '0');
$('#wr').append(e.data.entry);
};
$l3.on('click',{ entry: 'test'}, movebox);

Can a click handler be an object?

I'm trying to register on +1 clicks from within my module, which is wrapped as an annonymous function.
For this end, I created a global object MyModule, and exported my click handler function through it. The problem is - my click handler doesn't get called.
Live demo. Code:
// Initialize +1 button
gapi.plusone.go();
(function(){
window.MyModule = {};
function plusOneClicked() {
alert("+1!");
}
window.MyModule.plusOneClicked = plusOneClicked;
})()
...
<g:plusone callback='window.MyModule.plusOneClicked'></g:plusone>
When I give as a callback an external function, whose only purpose is to forward the calls to window.MyModule.plusOneClicked, it works:
function foo() {
window.MyModule.plusOneClicked();
}
...
<g:plusone callback='foo'></g:plusone>
Why would the click handler miss window.MyModule.plusOneClicked(), but find foo()?
Google is probably writing
window[callback]();
in their code.
This requires that the callback string refer to a property of window, not a property of another object.
I believe because callback expects a direct handler method (as in foo()) rather than a reference (as in window.MyModule.plusOneClicked). So basically, you cannot simply assign such a reference to click handler, but write a (wrapper) method as the handler and have it perform the necessary invocation.

Passing the event via an attached event listener

After spending so much time in jQuery, I'm rusty on my old fashioned JS...
The question: When attaching an event to an object that you want to trigger a function, how do you pass the event to said function?
Example function:
myFunction(e){
...
}
Example event attachment:
document.getElementById('blargh').onkeypress = function(){myfunction([what do I put here to pass the event?])};
Make the handler accept a parameter, say event, and pass it to your function:
document.getElementById('blargh').onkeypress = function(event){myfunction(event)};
The event handler always gets the current event passed as parameter... in the W3C model.
For IE you have to get the parameter via window.event. Thus, in the function you can write something like:
function(event) { event = event || window.event; myfuntion(event);}
you can try using arguments. This variable gets automatically populated in the local scope. It is an array of all the arguments that was passed into the function. If you pass arguments on to your myfunction, everything that was passed into the even handler will be passed as an array to myfunction.
document.getElementById('blargh').onkeypress = function(){myfunction(arguments)};
function myfunction(args)
{
alert(args[0]);
}

Categories

Resources