Solved

jQuery how do  you attach a function to a click event, not a delegate?

Posted on 2009-05-14
8
351 Views
Last Modified: 2012-05-07
I want to attach a function to a click event, but I don't want to write an inline function since I might want to call the same fuction from two places.

I know how to do this:
$(document).ready(function() {
    $('#example_button').click(function() {
        window.alert("You clicked me!");
    });
});


How do I do this:
$(document).ready(function() {
    $('#example_button').click(standardFunction());
}

function standardFunction(){
        window.alert("You clicked me!");
}
0
Comment
Question by:jackjohnson44
  • 3
  • 3
  • 2
8 Comments
 
LVL 14

Assisted Solution

by:ziffgone
ziffgone earned 200 total points
ID: 24387966
Easy:


$(document).ready(function() {
    $('#example_button').click(function() {
        standardFunction();
    });
});
function standardFunction(){
        window.alert("You clicked me!");
}

Open in new window

0
 
LVL 12

Expert Comment

by:alien109
ID: 24388062
Another thing you can do is call the function within the scope of the button

$(document).ready(function() {
    $('#example_button').click(function() {
        standardFunction.call(this);
    });
});
function standardFunction(){
        window.alert("You clicked me!");
}
0
 

Author Comment

by:jackjohnson44
ID: 24388321
Thanks, but can one of you tell me the difference in the .call?

Does that do anything extra for me?
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 14

Expert Comment

by:ziffgone
ID: 24388409
Not sure.

@alien109: What would the benefit be of using ".call"?

Regards...
0
 
LVL 12

Expert Comment

by:alien109
ID: 24388513
using call, allows you to call a function within the scope of an object.

For example:

function test() {
    alert(this.color);
}

a = {color:"red"};
b = {color:"blue"};

test.call(a) // would result in an alert with the text "red"
test.call(b) // would result in an alert with the text "blue"

So in your standardFunction, you say, "you clicked me!". However you don't actually know who "me" is. So, by using call, the function can get executed in the scope of the button object that was clicked. Using the keyword "this" within that function would reference the button object. In other words, the "me" in this case would actually be the button object: $('#example_button')
0
 
LVL 12

Accepted Solution

by:
alien109 earned 300 total points
ID: 24388590
Sometimes I don't explain stuff well... So I apologize if I'm not making sense.

Essentially the reason you MAY want to do this (I'm not saying you do!) is so that if you want to actually do something to the button that was clicked, you'd need to know which button you clicked. By using call, you can simply refer to the button that was clicked, by using "this" within the function.
0
 

Author Closing Comment

by:jackjohnson44
ID: 31581617
Thanks Guys, good explanation alien!
0
 
LVL 14

Expert Comment

by:ziffgone
ID: 24389484
That's cool alien109, thanks...
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Replace &lt; with < 14 59
How do I make my dropdowns depended within a JQuery Modal Dialog box. 3 29
replace link with jQuery 4 14
tiny glitch in my main slider 3 24
DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question