how to call a function from another function in Jquery

Question

<script>
 $(document).ready(function(){
 //Load City by State
 $('#billing_state_id').live('change', function() {
 //do something
 }); 
 $('#click_me').live('click', function() {
 //do something
 //need to recall $('#billing_state_id').live('change', function() { but how?
 }); 
 });
</script>

Load City by State working fine but i don't know whether it's possible or not to call it within another function like $('#click_me').live('click', function().

• Benjamin Gruenbaum: .live is deprecated, use on (check the manual page on it, it's very descriptive. Moreover, jQuery is just JavaScript... you call a function just like you would at any other point with JS
• Cristian E.: I suggest you to use on() function against live(). Since live is deprecated.
• user1636522: Well, I have decided to restore my answer. Indeed, I don't know why I should be fairplay while others aren't. Furthermore, there are too many downvotes on this question and I don't see any good reason for that.

Answer 1

I assume you don't want to rebind the event, but call the handler.

You can use trigger() to trigger events:

$('#billing_state_id').trigger('change');

If your handler doesn't rely on the event context and you don't want to trigger other handlers for the event, you could also name the function:

function someFunction() {
 //do stuff
}
$(document).ready(function(){
 //Load City by State
 $('#billing_state_id').live('change', someFunction); 
 $('#click_me').live('click', function() {
 //do something
 someFunction();
 });
 });

Also note that live() is deprecated, on() is the new hotness.

• Benjamin Gruenbaum: The better approach is to just make the function named and not anonymous. This will also trigger all other handlers attached to the event.
• user400654: That depends on intent. maybe it needs to trigger other handlers attached to the event.
• Benjamin Gruenbaum: That's a possibility, but it doesn't seem like what OP is trying to do from his description in the question.

Answer 2

wrap you shared code into another function:

<script>
 function myFun () {
 //do something
 }
 $(document).ready(function(){
 //Load City by State
 $(document).on('change', '#billing_state_id', function() {
 myFun ();
 }); 
 $(document).on('click', '#click_me', function() {
 //do something
 myFun();
 }); 
 });
</script>

• Benjamin Gruenbaum: Why are you wrapping the function with another function? You can just do click, myFun);` also note, .live is deprecated.
• collapsar: @BenjaminGruenbaum: it's cleaner design. expressly calling an event handler (instead of waiting for events to be dispatched to it) strongly hints at some functionality beyond processing user interaction ('business logic', if you wish to say so) and independent of the semantics of the event. this code portion should thus be be factored out, just imagine later additions of more processing to the 'change' event handler which is idiosyncratic to this event. directly calling the handler from other code portions would break the application in a way hard to detect.
• Benjamin Gruenbaum: I think you mixed up what I was trying to sayI did not mean you should use .click() or .change() to trigger the event manually (See my comment on the other answeR). What I was talking about is writing myFun instead of function(){ myFun()} since myFun is already a function and you're wrapping it in another (anonymous function expression) for a reason that's beyond me :) The second thing I said is that .live is deprecated (Since jQuery 1.7 if I recall correctly) and should not be used in new code. .on should be preferred to it.
• collapsar: @BenjaminGruenbaum: the argument still holds: even if you use a named function, it still is the event handling function - it unites event ui logic and business logic unless separated into different functions. thanks for your advice on the deprecated api call, i have changed the answer accordingly.
• Benjamin Gruenbaum: what "Business Logic" - You're querying your own document, you have query selectors and you listen to view change for executing business logic without any separation. That's the broken 'jQuery way' (people using jQuery for page management and not things like scraping) - the problem in developing an application like this is a lot more inherent than wrapping a function in an excess function expression (which I still don't understand what it accomplish in this case). It's amusing to talk about proper SoC in such a problematic design to begin with.

Answer 3

I think in this case you want something like this:

$(window).resize(resize=function resize(){ some code...}

Now u can call resize() within some other nested functions:

$(window).scroll(function(){ resize();}