Question

我正在使用asual jquery-address, tabs example，并希望将datepicker添加到“Extra”标签中。如果我只是添加

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

它不会工作。所以我发现我必须使用.live（）。因为我使用jquery-1.7 .live（）有changed到.on（）。

如果我添加此代码，则datepicker仅适用于第二次单击。

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

我在another thread中看到了一种不推荐的方法，让它像这样工作

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

我是如何正确使用它的？有没有推荐的方法让datepicker像我想要的那样工作？

我想我需要使用.on（），因为我想重新加载包含#datepicker和.load（）事件的表单。

Answer 1

要完成您的三种方法，第一种方法会失败，因为您的设置方式是#datepicker尚未定义。您可以将其替换为alert($('#datepicker').length)并查看它为零来检查这一点。

第二种方法是点击两次，因为日期选择器不知道第一次点击，因为它是在点击发生后创建的。

第三种方法有效，因为它强制在第一次点击后出现日期选择器。这很好但有点浪费，因为在你设置了datepicker之后，它有自己的事件监听器，它会在点击开始时显示。

回到第一种方法，由于#datepicker还没有存在，因此无法正常工作。您可以通过将('#datepicker').datepicker()移动到代码中创建它的点之后来完成此工作。

如果无法做到这一点，您可以使用第三种方法仅在第一次点击时激活您的功能，但从on切换到one。这将使第一次点击是您创建并显示日期选择器的事件监听器。之后，将删除您的事件侦听器，并且只存在内置日期选择器侦听器。

那就是说，我真的很讨厌$(document).on('click', ...，因为它会在你每次点击页面时进行评估。它在文档级别捕获事件，然后将目标列表中的每个元素与选择器进行比较。这很慢，如果你有很多它们，真的会增加。如果必须使用委托侦听器，则应将其移动到最近的父级。例如，如果#datepicker始终显示#form1，则您可以改为$('#form1').on('click', ...并减少处理。

Answer 2

尝试以下代码示例：

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

Answer 3

您的解决方案会在点击它时将标识为'datepicker'的字段转换为日期选择器。因此，第一次单击会将输入字段转换为日期选择器。第二次单击打开日期选择器（顺便说一下，再次使用jQuery将输入字段转换为日期选择器）。

如何添加脚本以在Extra Tab HTML（使用此链接加载的HTML：http://www.asual.com/jquery/address/samples/tabs/extras.html）的末尾创建日期选择器？

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

Answer 4

我会使用事件绑定器，因为它使用的是jquery.tab小部件。

等等，

$( ".selector" ).tabs({
activate: function( event, ui ) {

    if(window.location.indexOf("#Extra") >= 0)
    {
      $("#datepicker").datepicker();
    }
}
});

然后它应该工作。请注意，如果这不起作用，请尝试绑定此事件

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

此致

使用jquery .on（）事件的jquery-ui datepicker

4 个答案: