Jquery .live works but not with .datepicker

Question

Thanks for looking, all sincerely helpful answers are up-voted. I have some date input fields that are there when the page loads and a bunch that get generated dynamically. Instead of calling .datepicker() on that class each time a new instance is generated, I'm using .live, but it doesn't seem to be working. Any idea why?

$("input[name=myfav]").live("click", function(){
    $(this).datepicker({ 
        /* some options here */ 
    });
});

I should mention, it works perfectly fine with autocomplete for instance.

$("input[name=mytwo]").live("click", function(){
    $(this).autocomplete("somefile.php");
});

score 26 · Accepted Answer · edited May 23 '17 at 12:09

26

Here is an article about the datepicker using the .live-event in jQuery:

http://www.vancelucas.com/blog/jquery-ui-datepicker-with-ajax-and-livequery/

The problem is that the Datepicker works by binding to the focus() event by default, but as of jQuery 1.3.2, the ‘focus’ event cannot be monitored by the ‘live’ event function.

Here is the work-around from the site::

<script type="text/javascript">
$(function(){
    $('input.calendarSelectDate').live('click', function() {
        $(this).datepicker({showOn:'focus'}).focus();
    });
});
</script>

EDIT: This workaround is no longer needed as jQuery 1.4.1+ now supports focus and blur events for live(). (Thanks @Chris S)

edited May 23 '17 at 12:09

Community

1
1

answered Oct 18 '09 at 20:20

Espo

41,399
21
132
159

Thanks for the reply. I knew it was plugin related since the other plugins work fine. This clarifies it. – Chris Oct 18 '09 at 21:34
Ran into the same problem. Another part of making this work, for us, was making sure each datepicker input had a unique ID. Otherwise, at least in Google Chrome, you could click in any of the inputs and get a datepicker, but it would actually change the date in the first one with that ID. (Of course, semantically, IDs should always be unique, anyway, but that was the bug.) – Nathan Long Nov 16 '10 at 15:36
I still had trouble getting the datepicker to close after selecting it. Tried moving the focus to the next input but it wouldn't work. So, onClose, I destroy the datepicker, then on click, I re-bind. Kind of a hack, but it works for me for now. – webtrifusion Aug 19 '11 at 20:06

score 8 · Answer 2 · edited Aug 03 '12 at 15:03

8

This is what I ended up using. It takes advantage of live and focus in newer jQuery

$.datepicker.setDefaults({ dateFormat: 'yy-mm-dd', ... });
$('input.date').live('focus', function() {
    $(this).datepicker().datepicker('show');
    true;
});

edited Aug 03 '12 at 15:03

lorem monkey

3,942
3
35
49

answered Feb 29 '12 at 16:10

fringd

2,380
1
18
13

score 4 · Answer 3 · answered Sep 01 '10 at 10:40

4

Worth noting that jQuery 1.4.1+ now supports focus and blur events for live(), so the workaround, whilst cool, is no longer needed - the orignal poster's version works fine!

answered Sep 01 '10 at 10:40

Chris S

719
1
6
13

1

It didn't quite work for me but $(".date").live("focus",function() { $(this).datepicker({ dateFormat: 'dd/mm/yy' }) }); did – brad Sep 21 '11 at 04:32

score 0 · Answer 4 · answered Jul 16 '15 at 06:58

0

Update : As of jQuery 1.7, the .live() method is deprecated. 1.7, Use .on() to attach event handlers. Reference : http://api.jquery.com/live/

answered Jul 16 '15 at 06:58

Anoop Pete

492
2
4
17

Jquery .live works but not with .datepicker

4 Answers4

Linked