CODEWITHSUNDEEP
javascriptjquery
David19801
David19801

Reputation: 11448

How does jquery know which function to run?

I have:

<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
</script>

<div class="demo">
<p>Date: <input id="datepicker" type="text"></p>
</div>

When I click in the datepicker box the datepicker appears, as expected.

Question: How does jquery know to run that function when I click on the box and not another function?

If I want to add a function for something else, how would jquery know which to refer to?

I am used to using php where all functions have a name and you refer to them by the name...

Upvotes: 0

Views: 118

Answers (9)

Silkster
Silkster

Reputation: 2210

Your mark up probably includes script references to the jQuery library and either the jQueryUI library or a "datepicker" jQuery plugin.

I'll assume jQueryUI is being used. jQueryUI includes a datepicker widget that is registered when the library is included with this reference. The widget registers itself with jQuery making it available to apply to collections of DOM elements.

$('#datepicker) by itself creates a collection of jQuery objects that refer to DOM elements. Adding, or chaining, ".datepicker()" to this collection like so, $( "#datepicker" ).datepicker();, calls the datepicker widget using the collection as its context, and applies its own events and methods to each DOM element in the collection. This includes a "click" event which fires when you click the input field, showing the calendar and any associated controls that the datepicker widget needs to provide the desired functionality.

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816364

$("#datepicker") will select the element with ID datepicker and calling the function .datepicker() on it will set up the necessary event handlers and logic.

Datepicker is part of jQuery UI, it source code is available here.

If you want to extend jQuery yourself, have a look at Plugins/Authoring. Basically, a plugin has this structure:

(function($) {
    $.fn.someFunction = function() {
        // `this` refers to the selected elements
        return this.on('click', function() {
            alert('42');
        });
    };
}(jQuery));

When you now call this function on selected elements, $('div').someFunction(), it will bind an click event handler to them.

DEMO

.datepicker() is doing the same, albeit much more complex.

Upvotes: 0

Fresheyeball
Fresheyeball

Reputation: 30015

Part of .datepicker() is an attachment to click event. When you click on #datepicker javascript will run all functions attached to that event. So if you do this:

$('#datepicker').datepicker();
$('#datepicker').click(function(){
    alert('clicked');
});

Both the datepicker and the alert will occur. This will continue to be the case unless you UNBIND #datepicker from functions attached to it.

Upvotes: 0

Nathan Anderson
Nathan Anderson

Reputation: 6878

In javascript, objects in the DOM (your HTML elements), have the concept of events, that is they can have functions bound to a certain action that an element can respond to. A very common event, and one probably used by the datepicker, is the click event. So when you call $( "#datepicker" ).datepicker();, inside the datepicker function another function is being bound to the click event of the element with the id datepicker. You can have multiple functions attached to a single event as well.

So in reality, the datepicker function is more like a setup routine, and when you actually click the element, you are triggering another function bound to one of the elements events, not the original datepicker function you called.

Upvotes: 0

Tim B James
Tim B James

Reputation: 20364

the datepicker plugin binds events based on the id which you have passed through.

In jQuery, you can bind any number of events to an element, and then it will run the functions that you have assigned to the events.

e.g.

$('#mybutton').click(function() { 
    // handle the click event 
});

$('#mytextbox').focus(function(){
    // handle the focus event
});

OR

$('#mybutton').bind('click', function(){
   // handle the click event.
});

Within the datapicker plugin, the click event is bound to the textbox, then it calls a function within the plugin which then generates the code for the calendar popup.

Upvotes: 0

mccow002
mccow002

Reputation: 6914

I'm assuming you're referring to this section of code:

$(function(){});

jQuery is based off of DOM elements. $(function(){}); is short hand for $(document).ready(function(){});

This event is attached to the document element, and is run when the ready event is fired. So in this example, ready is the function name, just like you might have a method called ready in php. It's just that jQuery has provided you with a shorthand way of calling it.

Upvotes: 0

Naftali
Naftali

Reputation: 146302

$ is a function in and of itself.

See the source here

Upvotes: 0

Sam
Sam

Reputation: 15771

.datepicker() is an extension, and it probably has event handlers it assigns to the element the function is applied to.

Upvotes: 0

T. Stone
T. Stone

Reputation: 19485

$ is the name of a function.

That function, when executed, returns an object.

That object has the property datepicker.

Think of it like this:

var a = {
   datepicker: 'asdf'
};

function b() { return a; };

var c = b().datepicker;

The object that is being returned by $ is a "wrapped set" of elements. That is an input argument into the datepicker plugin.

So in other words, it's like this:

var a = 'asdf';

function b(val) {
   alert(val);
}

b(a);

// How does the alert box know how to say "asdf"?

Upvotes: 3

Related Questions