6

我正在使用 asual jquery-address，tabs 示例，并希望将 datepicker 添加到“Extra”选项卡中。如果我只是添加

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

它不会工作。所以我发现我必须使用.live()。由于我使用 jquery-1.7 .live() 已更改为 .on()。

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

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

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

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

我如何正确使用它？在这个例子中，有没有推荐的方法让 datepicker 像我想要的那样工作？

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

4

5 回答 5

7

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

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

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

回到你的第一种方法，它不起作用，因为#datepicker还不存在。您可以通过移动('#datepicker').datepicker()到代码中创建它的点之后来完成这项工作。

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

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

于 2011-11-12T15:23:04.740 回答
2

试试下面的代码示例：

$(document).on("focus", "#datepicker", function () {
    $("#datepicker").datepicker();
});
于 2014-04-28T08:38:11.273 回答
0

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

所以像，

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

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

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

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

问候

于 2014-04-28T08:58:10.860 回答
0

'datepicker'您的解决方案在单击时将带有 id 的字段转换为日期选择器。因此，第一次单击会将输入字段变成日期选择器。第二次单击打开日期选择器（顺便再次将输入字段转换为使用 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>
于 2011-11-12T15:12:37.413 回答
0

如果您在上述回复中没有找到解决方案.. 试试这个作为最后的手段。

改变加载方式。

您必须将内容加载为 html 而不是文本。有时我们将其加载为文本。不同的将不可见。如果您使用 jquery ajax，请将 load() 交换为 html()。这还没有测试，理论上是可能的

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

在我们这样输入之前 
你的html在这里
使固定 
你的html在这里
{script}你的js代码{/script}

如果您将响应加载为文本（ load?? ）而不是 html，就会发生这种情况。此方法已用于我的（复杂的）源代码。这种方法比普通方法花费很多带宽，因为再次加载代码。

笔记：

$(document).on(..) is best practice
于 2022-01-14T10:38:27.347 回答