JQuery: delegate and datepicker

Question

I need that every text input in a given class is a datepicker. Something like:

$("input[type=text].time").datepicker();

but I'm adding a lot of code via Jquery.load() so I believe I need a delegate. The problem is I don't know how to do it, because as far as I know, load event cannot be used in a delegate. It will be easy if it exists:

$(document).delegate("input[type=text].time", "load", function(){
    $(this).datepicker();
});

Araldo

I don't see the need for a delegate.... that just confuses the reader. – Tuesday

If you load via AJAX a page that contains a new input of that class ("time"), without using a delegate it's not automatic the datapicker activation. I load a lot of data vía jquery.load() and it's not only the datapicker class, there are more like this that need to be set by hand on each page load. – Araldo

If you're loading the content, add the datepicker on success. I haven't found a good alternative to the way you're wanting to use .load(). – Lixiviate

If the code is injected via an Ajax request, just initiate datepicker() as a callback event. – Birdcage

Answer 1

$("body").delegate("input[type=text].time", "focusin", function(){
   $(this).datepicker();
});

I used delegate on the body because I don't know if you have your code in other containers that you can target.

Here is a fiddle that targets a specific div with delegate:

http://jsfiddle.net/MpqAy/

Urinal

So on every click, try to add a date picker to any valid result? – Lixiviate

It's not what I was looking for exactly, but it works.. I don't know what happens when you reinitialize a lot of times datepicker – Araldo

@jk that's great. Thanks for posting this. It's just what I was looking for and works perfectly - first time. – Ce

+1, @JaredFarrish I had the same concern. Luckily, it would appear jQueryUI does not rebind if it has already bound: github.com/jquery/jquery-ui/blob/master/ui/… – Bently

Good idea. But why not just focus instead of focusin? – Buxton

@Buxton Depends on your need. This is distinct from the focus event in that it supports detecting the focus event on parent elements (in other words, it supports event bubbling). api.jquery.com/focusin – Urinal

What if this opration is to be done after a certain div finishes loading its content ? – Callan

Answer 2

I know this question is relatively old but I just wanted to share my solution as it's still relevant in 2018.

 $('#container').off().on('focusin', '.date', function () => {
     $(this).datepicker();
 });

If you're using jQuery with TypeScript

 $('#container').off().on('focusin', '.date', (e) => {
     $(e.currentTarget).datepicker();
 });

You'll notice the off() function here. This will wipe out events from the Jquery object in question. So you won't get any bubbling issues. Keep in mind though, that it kills all events on that object and not just the event you're running again.

I wouldn't recommend using off() or on() on document, html, or body level jQuery objects. Just my opinion though.

Vasiliki