Solved

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

Posted on 2009-05-14
8
350 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
 
LVL 14

Expert Comment

by:ziffgone
ID: 24388409
Not sure.

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

Regards...
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

863 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

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now