Jquery-ui datepicker with jquery.on () event

Question

I am using asual jquery-address, example tabs, and want to add datepicker to the Extra tab. If I just add

$(document).ready(function() { $( "#datepicker" ).datepicker(); }); 

it will not work. So I found out that I need to use .live (). Since im using jquery-1.7.live () has changed to .on ().

If I add this code, then datepicker only works in the second click.

 $(document).ready(function() { $(document).on('click', '#datepicker', function () { $(this).datepicker(); }); }); 

I saw in another thread not the recommended way to make it work as follows

 $(document).ready(function() { $(document).on('click', '#datepicker', function () { $(this).datepicker().datepicker( "show" ); }); }); 

How do I use it correctly? Is there a recommended way to make datepicker work as I want in this example?

I think I need to use .on () because I want to reload the form containing #datepicker with the .load () event.

Answer 1

To get through the three approaches, the first one does not work because you are set up in such a way that #datepicker is not yet defined. You can verify this by replacing it with alert($('#datepicker').length) and seeing that it is zero.

The second approach is two clicks, because the datapicker does not know about the first click, because it was created after the click occurred.

The third approach works because it makes the datepicker appear after the first click. This is great, but a bit wasteful, because after you set up datepicker, it has its own event listener that will make it appear when the click starts.

Returning to your first approach, it did not work because #datepicker did not exist yet. You can do this job by moving ('#datepicker').datepicker() to the point after the code in which it is created.

If this is not possible, you can make your function work only on the first press, using the third approach, but switching from on to one . This will ensure that the first click is your event listener, which creates and displays the date selection. After that, your event listener will be deleted, and only the built-in date picker will exist.

However, I really hate $(document).on('click', ... because it evaluates every time you click on the page. It captures the event at the document level and then compares each item in the target list with a selector. It slowly and really stacks up if you have a lot of them. If you have to use a delegated listener, you have to transfer it to the closest parent. For example, if #datepicker always appears in #form1 , you can do $('#form1').on('click', ... instead, and reduce your processing.

Answer 2

Try the sample code below:

 $(document).on("focus", "#datepicker", function () { $("#datepicker").datepicker(); }); 

Answer 3

Your solution turns the field with id 'datepicker' into datepicker when you click on it. Thus, the first click turns the input field into a date. A second click opens the datepicker (and, by the way, rotates the input field in datepicker again using jQuery).

How about adding a script to create a datepicker at the end of an additional HTML tab (HTML which is downloaded from this link: http://www.asual.com/jquery/address/samples/tabs/extras.html )?

 <!-- This is "Extra" Tab --> <input id="datepicker"> <script> $('#datepicker').datepicker(); </script> 

Answer 4

I would use a binding event since it uses the jquery.tab widget.

so something like

 $( ".selector" ).tabs({ activate: function( event, ui ) { if(window.location.indexOf("#Extra") >= 0) { $("#datepicker").datepicker(); } } }); 

Then it should work. Note that if this does not work, try attaching an event like this

 $(".selector").bind("activate",function(){}); 

Hello