jquery-ui datepicker 与 jquery .on() 事件

Question

我正在使用 asual jquery-address, tabs example 并想要将日期选择器添加到“额外”选项卡。 如果我只是添加

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

它是行不通的。所以我发现我必须使用.live()。 由于我使用 jquery-1.7 .live() 已更改< /a> 到 .on()。

如果我添加此代码，日期选择器仅在第二次单击时有效。

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

我在另一个线程中看到了一种不推荐的方法来使其像这样工作

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

我怎么样正确使用它吗？在这个例子中，有没有推荐的方法让日期选择器像我想要的那样工作？

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

Answer 1

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

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

第三种方法有效，因为它强制日期选择器在第一次单击后出现。这很好，但有点浪费，因为在设置日期选择器后，它有自己的事件侦听器，可以使其在单击开始时出现。

回到您的第一种方法，它不起作用，因为 #datepicker 尚不存在。您可以通过将 ('#datepicker').datepicker() 移动到代码中创建它的位置之后来完成此操作。

如果这是不可能的，您可以使用第三种方法，但从 on 切换到 one，使您的函数仅在第一次单击时触发。这将使第一次单击是创建并显示日期选择器的事件侦听器。之后，您的事件侦听器将被删除，并且仅存在内置日期选择器侦听器。

也就是说，我真的很讨厌 $(document).on('click', ... 因为它会在您每次单击页面时进行评估。它捕获文档级别的事件，然后比较每个如果您必须使用委托侦听器，则应将其移至最近的父级。例如，如果 #datepicker。 总是出现在#form1，您可以改为 $('#form1').on('click', ... 并减少处理。

Answer 2

尝试下面的代码示例：

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

Answer 3

您的解决方案会在单击 id '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(){});

问候

Answer 5

如果您在上述回复中没有找到解决方案。请尝试将此作为最后的手段。

改变加载方法。

You must load the content as html not text. Sometime we load it as text. The different will not visible. If you use jquery ajax, exchange load() to html(). This is not tested yet, by theory is posible

再次重新加载响应中的脚本或命令。

Before we type like this

your html here

fix

your html here 
{script} you js code {/script}

如果您将响应加载为文本（ load?? ），而不是 html，就会发生这种情况。这个方法已经用在我的（复杂的）源代码上。这种方法比正常方法消耗大量带宽，因为需要再次加载代码。

笔记：

$(document).on(..) is best practice